---
import type { LinkedEvent } from '../data/linked-events';
import { useTranslations, type Lang } from '../i18n/ui';

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

const { event, lang = 'en' } = Astro.props;
const t = useTranslations(lang);
---

<article class="event-card cal-event linked">
  {event.image && <img class="cal-thumb" src={event.image} alt="" loading="lazy" />}
  <div class="cal-body">
    <div class="event-top">
      <span class="org-badge org-ext">{t('events.badge.ext')}</span>
      <span class="cal-when">{event.date}</span>
    </div>
    <h3 class="cal-name">{event.title}</h3>
    {event.location && <p class="cal-loc">{event.location}</p>}
    <p class="cal-desc">{event.blurb[lang] ?? event.blurb.en}</p>
    <div class="cal-actions">
      <a class="btn ghost" href={event.url} rel="noopener">{t('events.viewWebsite')}</a>
    </div>
  </div>
</article>