anouma/components/EventTeaserCard.tsx

import Link from "next/link";
import type { Event } from "@/payload-types";
import { formatEventDateParts, formatTimeRange } from "@/lib/format";

export function EventTeaserCard({ event }: { event: Event }) {
  const { day, month } = formatEventDateParts(event.date);
  const time = formatTimeRange(event.startTime, event.endTime);

  return (
    <Link
      href={`/termine/${event.slug}`}
      className="group flex gap-5 rounded-3xl bg-background p-6 transition-colors hover:bg-anouma-cream-light"
    >
      <div className="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-2xl bg-anouma-mauve-dark text-white">
        <span className="font-serif text-xl font-semibold leading-none">{day}</span>
        <span className="mt-1 text-[10px] font-medium uppercase tracking-widest">{month}</span>
      </div>
      <div>
        <h3 className="font-serif text-lg font-medium text-anouma-plum">{event.title}</h3>
        {time && <p className="mt-1 text-sm text-anouma-plum">{time}</p>}
        {event.location && <p className="text-sm text-anouma-plum/80">{event.location}</p>}
        <span className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-anouma-mauve-dark">
          Mehr erfahren
          <svg
            width="12"
            height="9"
            viewBox="0 0 14 10"
            fill="none"
            aria-hidden="true"
            className="transition-transform duration-300 group-hover:translate-x-1"
          >
            <path
              d="M1 5h11.5M8 1l4.5 4L8 9"
              stroke="currentColor"
              strokeWidth="1.4"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </span>
      </div>
    </Link>
  );
}