sofa/app/(pages)/explore/title-row.tsx

"use client";

import { motion } from "motion/react";
import { useRouter } from "next/navigation";
import { useCallback } from "react";
import { TitleCard } from "@/components/title-card";

interface TitleRowItem {
  tmdbId: number;
  type: "movie" | "tv";
  title: string;
  posterPath: string | null;
  releaseDate: string | null;
  voteAverage: number;
}

interface TitleRowProps {
  heading: string;
  icon: React.ReactNode;
  items: TitleRowItem[];
}

const staggerContainer = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.05 } },
};

const staggerItem = {
  hidden: { opacity: 0, y: 12, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: { type: "spring" as const, stiffness: 300, damping: 24 },
  },
};

export function TitleRow({ heading, icon, items }: TitleRowProps) {
  const router = useRouter();

  const handleImport = useCallback(
    async (tmdbId: number, type: "movie" | "tv") => {
      const res = await fetch("/api/titles/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tmdbId, type }),
      });
      const data = await res.json();
      if (data.id) {
        router.push(`/titles/${data.id}`);
      }
    },
    [router],
  );

  if (items.length === 0) return null;

  return (
    <section className="space-y-4">
      <div className="flex items-center gap-2">
        {icon}
        <h2 className="font-display text-xl tracking-tight">{heading}</h2>
      </div>
      <motion.div
        className="feed-scroll -mx-4 flex gap-4 overflow-x-auto px-4 pb-2 sm:-mx-0 sm:px-0"
        variants={staggerContainer}
        initial="hidden"
        animate="visible"
      >
        {items.map((item) => (
          <motion.div
            key={`${item.type}-${item.tmdbId}`}
            variants={staggerItem}
            className="w-[140px] shrink-0 sm:w-[160px]"
          >
            <TitleCard
              tmdbId={item.tmdbId}
              type={item.type}
              title={item.title}
              posterPath={item.posterPath}
              releaseDate={item.releaseDate}
              voteAverage={item.voteAverage}
              onImport={() => handleImport(item.tmdbId, item.type)}
            />
          </motion.div>
        ))}
      </motion.div>
    </section>
  );
}