---
import type { CalendarEvent } from '../lib/atproto/events';
import { useTranslations, type Lang } from '../i18n/ui';

interface Props {
  event: CalendarEvent;
  lang?: Lang;
  label?: string;
}

const { event, lang = 'en' } = Astro.props;
const t = useTranslations(lang);
const tz = event.timezone || 'Europe/Amsterdam';

// Dutch date + 24h time on both language sides; shown in the event's own timezone.
const start = new Date(event.startsAt);
const end = event.endsAt ? new Date(event.endsAt) : undefined;
// "25 Jun 2026" style, matching the ecosystem event cards (not numeric DD-MM-YYYY).
const dateStr = start.toLocaleDateString('en-GB', {
  day: 'numeric',
  month: 'short',
  year: 'numeric',
  timeZone: tz,
});
const timeOpts = { hour: '2-digit', minute: '2-digit', timeZone: tz } as const;
const startTime = start.toLocaleTimeString('nl-NL', timeOpts);
const endTime = end ? end.toLocaleTimeString('nl-NL', timeOpts) : undefined;
const cancelled = event.status === 'cancelled';
---

<article class="event-card cal-event">
  {event.thumb && <img class="cal-thumb" src={event.thumb} alt="" loading="lazy" />}
  <div class="cal-body">
    <div class="event-top">
      <span class="org-badge org-ours">{event.sourceHandle}</span>
      <span class="cal-when">
        {dateStr} · {startTime}{endTime ? `–${endTime}` : ''}
      </span>
    </div>
    <h3 class="cal-name">{event.name}</h3>
    {
      (event.location || event.mode === 'virtual') && (
        <p class="cal-loc">{event.location ?? 'Online'}</p>
      )
    }
    {cancelled && <p class="cal-cancelled">{t('events.cancelled')}</p>}
    {event.description && <p class="cal-desc">{event.description}</p>}
    {
      event.upcoming && !cancelled ? (
        <div class="cal-actions">
          <button
            class="btn rsvp-btn"
            type="button"
            data-event-uri={event.uri}
            data-event-cid={event.cid}
            data-url={event.url}
            data-label-go={t('events.rsvp.go')}
            data-label-going={t('events.rsvp.going')}
            aria-pressed="false"
          >{t('events.rsvp.go')}</button>
          <a class="btn ghost" href={event.url} rel="noopener">{t('events.details')}</a>
        </div>
      ) : (
        <div class="cal-actions">
          <a class="btn ghost" href={event.url} rel="noopener">{t('events.details')}</a>
        </div>
      )
    }
  </div>
</article>