---
import type { Event } from "../data/events";
import { getEventPath, isExternalEvent } from "../data/events";

type Props = {
  event: Event;
  compact?: boolean;
};

const { event, compact = false } = Astro.props;
const path = getEventPath(event);
const hasDestination = path !== "#";
const external = hasDestination && isExternalEvent(event);
const kindTheme: Record<Event["kind"], NonNullable<Event["theme"]>> = {
  Workshop: "sage",
  Conference: "sky",
  School: "violet",
  Event: "rose",
  Course: "amber",
  Unconference: "barcamp",
};
const theme = event.highlight ? event.theme ?? kindTheme[event.kind] : kindTheme[event.kind];
const title = event.shortTitle ?? event.title;
const actionLabel = external ? `Open event website for ${title}` : `Open details for ${title}`;
---

<article
  class:list={["event-card", `event-card--${theme}`, event.highlight && "event-card--highlight", compact && "event-card--compact"]}
  data-event-card
  data-event-year={event.year}
  data-event-kind={event.kind}
>
  <div class="event-card__meta">
    <button
      class="event-badge"
      type="button"
      data-filter-year={event.year}
      aria-pressed="false"
      aria-label={`Filter catalog to year ${event.year}`}
    >
      {event.year}
    </button>
    <button
      class="event-badge"
      type="button"
      data-filter-kind={event.kind}
      aria-pressed="false"
      aria-label={`Filter catalog to type ${event.kind}`}
    >
      {event.kind}
    </button>
    {event.status && <span class="event-badge">{event.status}</span>}
  </div>
  <h3>
    {hasDestination ? (
      <a href={path} target={external ? "_blank" : undefined} rel={external ? "noreferrer" : undefined}>
        {title}
      </a>
    ) : (
      title
    )}
  </h3>
  <p>{event.summary}</p>
  <div class="event-card__footer">
    <span>{event.date}</span>
    {hasDestination && (
      <a
        class="text-link"
        href={path}
        target={external ? "_blank" : undefined}
        rel={external ? "noreferrer" : undefined}
        aria-label={actionLabel}
      >
        {external ? "Event website" : "Details"}
      </a>
    )}
  </div>
</article>
