"use client";

import Link from "next/link";
import { motion, useReducedMotion } from "motion/react";
import Icon from "@/components/ui/Icon";
import Photo from "@/components/ui/Photo";

const ease = [0.2, 0.7, 0.2, 1] as const;

export type EventCardModel = {
  key: string;
  name: string;
  /** Category and city, shown under the name. */
  meta: string;
  /** ISO timestamp with offset, or null when the date is unknown. */
  date: string | null;
  price: string;
  free: boolean;
  src: string | null;
  /** Detail page. Null for sample items, which have no detail. */
  href: string | null;
};

const dateFormat = new Intl.DateTimeFormat("en-GB", { weekday: "short", day: "numeric", month: "short", year: "numeric", timeZone: "Asia/Damascus" });

export default function EventCard({ item: e, index }: { item: EventCardModel; index: number }) {
  const reduce = useReducedMotion();
  const body = (
    <>
      <div className="lf-img">
        <Photo src={e.src} label={e.name} alt={e.name} />
      </div>
      <div className="lf-meta">
        <h3>{e.name}</h3>
        {e.meta && <p>{e.meta}</p>}
      </div>
      <div className="lf-row">
        {e.date && (
          <span className="lf-date">
            <Icon name="event" />
            {dateFormat.format(new Date(e.date))}
          </span>
        )}
        {e.price && (
          <span className="lf-price" data-free={e.free}>
            {e.price}
          </span>
        )}
      </div>
    </>
  );

  return (
    <motion.article
      layout
      className="lf-card"
      initial={reduce ? false : { opacity: 0, y: 14 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, transition: { duration: 0.15, ease } }}
      transition={{ duration: 0.45, delay: reduce ? 0 : index * 0.05, ease }}
    >
      {e.href ? (
        <Link href={e.href} className="lf-card-link">
          {body}
        </Link>
      ) : (
        <div className="lf-card-link">{body}</div>
      )}
    </motion.article>
  );
}