"use client";

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

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

export type PlaceCardModel = {
  key: string;
  name: string;
  /** Address or city, shown under the name. */
  meta: string;
  /** Cuisines, categories or service flags. */
  tags: string[];
  src: string | null;
  /** Detail page. Null for sample items, which have no detail. */
  href: string | null;
};

/** Photo first, text underneath. Enters with a short staggered rise and leaves with a quick fade. */
export default function PlaceCard({ item, index }: { item: PlaceCardModel; index: number }) {
  const reduce = useReducedMotion();
  const body = (
    <>
      <div className="lf-img">
        <Photo src={item.src} label={item.name} alt={item.name} />
      </div>
      <div className="lf-meta">
        <h3>{item.name}</h3>
        {item.meta && <p>{item.meta}</p>}
      </div>
      {item.tags.length > 0 && (
        <ul className="lf-tags" aria-label="Details">
          {item.tags.map((t) => (
            <li key={t}>{t}</li>
          ))}
        </ul>
      )}
    </>
  );

  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 }}
    >
      {item.href ? (
        <Link href={item.href} className="lf-card-link">
          {body}
        </Link>
      ) : (
        <div className="lf-card-link">{body}</div>
      )}
    </motion.article>
  );
}