RSVP Card

'use client'

import { useState } from 'react'
import './rsvp-card.css'

export type Rsvp = 'yes' | 'maybe' | 'no'
export interface RsvpCardProps {
  event: { title: string; date: Date; place: string }
  attendees: string[]
  me?: string
  onRsvp?: (r: Rsvp) => void
  size?: 'full' | 'compact'
  fill?: 'dark' | 'light'
  className?: string
}

/** Event card with RSVP and attendee stack. */
export function RsvpCard({ event, attendees, me = 'You', onRsvp, size = 'full', fill = 'dark', className }: RsvpCardProps) {
  const [r, setR] = useState<Rsvp | null>(null)
  const going = attendees.length + (r === 'yes' ? 1 : 0)
  const shown = attendees.slice(0, 4)
  const d = event.date
  const pick = (v: Rsvp) => { setR(v); onRsvp?.(v) }
  return (
    <div className={['sd-rsv', className].filter(Boolean).join(' ')} data-fill={fill} data-size={size}>
      <div className="sd-rsv__top">
        <div className="sd-rsv__cal" aria-hidden><span>{d.toLocaleDateString('en-US', { month: 'short' })}</span><b>{d.getDate()}</b></div>
        <div>
          <div className="sd-rsv__t">{event.title}</div>
          <div className="sd-rsv__m">{d.toLocaleDateString('en-US', { weekday: 'long' })}, {d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}<br />{event.place}</div>
        </div>
      </div>
      <div className="sd-rsv__who">
        <span className="sd-rsv__stack" aria-hidden>
          {r === 'yes' && <span className="sd-rsv__av" data-me="">{me.slice(0, 2)}</span>}
          {shown.map((a) => <span key={a} className="sd-rsv__av">{a}</span>)}
        </span>
        <span aria-live="polite">{going} going{r === 'maybe' ? ' · you might' : ''}</span>
      </div>
      <div className="sd-rsv__opts" role="radiogroup" aria-label="Are you going?">
        {([['yes', 'Going'], ['maybe', 'Maybe'], ['no', 'Can’t go']] as [Rsvp, string][]).map(([v, l]) => (
          <button key={v} type="button" role="radio" aria-checked={r === v} className="sd-rsv__o" onClick={() => pick(v)}>{l}</button>
        ))}
      </div>
      {r === 'yes' && <a className="sd-rsv__cal-link" href="#add-to-calendar" onClick={(e) => e.preventDefault()}>Add to calendar</a>}
    </div>
  )
}

.sd-rsv { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-rsv[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-rsv button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-rsv :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-rsv .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-rsv { width: min(100%, 320px); padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-rsv__top { display: flex; gap: 14px; }
.sd-rsv__cal { flex: none; width: 52px; border-radius: 12px; overflow: hidden; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.sd-rsv__cal span { display: block; padding: 3px 0; background: var(--strong); color: var(--on); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sd-rsv__cal b { display: block; padding: 4px 0 6px; font-size: 22px; font-weight: 650; }
.sd-rsv__t { font-size: 15px; font-weight: 650; }
.sd-rsv__m { font-size: 12.5px; color: var(--mute); margin-top: 3px; line-height: 1.45; }
.sd-rsv__who { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12.5px; color: var(--mute); }
.sd-rsv__stack { display: flex; }
.sd-rsv__av { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 99px; background: var(--soft); box-shadow: 0 0 0 2px var(--bg); font-size: 10.5px; font-weight: 650; color: var(--fg); }
.sd-rsv__av:first-child { margin-left: 0; }
.sd-rsv__av[data-me] { background: var(--strong); color: var(--on); animation: sd-rsv-in 360ms cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes sd-rsv-in { from { transform: translateY(8px) scale(0.6); opacity: 0; } }
.sd-rsv__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sd-rsv[data-size='compact'] .sd-rsv__m { display: none; }
.sd-rsv__o { height: 38px; border-radius: 11px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 180ms, color 180ms, transform 120ms; }
.sd-rsv__o:active { transform: scale(0.95); }
.sd-rsv__o[aria-checked='true'] { background: var(--strong) !important; color: var(--on); box-shadow: none; }
.sd-rsv__cal-link { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; animation: sd-rsv-fade 240ms ease; }
@keyframes sd-rsv-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-rsv *, .sd-rsv *::before, .sd-rsv *::after { animation: none !important; transition: none !important; } }