import type { EventItem } from "@/lib/seed-data";

const typeStyles: Record<EventItem["typ"], string> = {
  Trainingslager: "bg-belt-blue/15 text-blue-100",
  Lehrgang: "bg-accent/15 text-accent-light",
  Wettkampf: "bg-primary/15 text-primary-light",
  "Prüfung": "bg-belt-green/15 text-green-100",
  Anlass: "bg-gray-400/15 text-gray-200",
};

export default function EventCard({ event }: { event: EventItem }) {
  return (
    <article className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-transform duration-base hover:-translate-y-1 hover:shadow-md">
      <span
        className={`inline-block rounded px-2.5 py-1 text-xs font-semibold uppercase tracking-wide ${typeStyles[event.typ]}`}
      >
        {event.typ}
      </span>
      <h3 className="mt-3 font-display text-2xl leading-tight text-secondary">{event.titel}</h3>
      <dl className="mt-3 space-y-1 text-sm text-gray-700">
        <div className="flex gap-2">
          <dt className="font-medium text-primary">Datum</dt>
          <dd>{event.datumLabel}</dd>
        </div>
        <div className="flex gap-2">
          <dt className="font-medium text-primary">Zeit</dt>
          <dd>{event.uhrzeit}</dd>
        </div>
        <div className="flex gap-2">
          <dt className="font-medium text-primary">Ort</dt>
          <dd>{event.ort}</dd>
        </div>
      </dl>
      <p className="mt-4 text-sm leading-relaxed text-gray-700">{event.beschreibung}</p>
    </article>
  );
}