"use client";

import { motion } from "framer-motion";

import { Inbox } from "lucide-react";

import { DropCard } from "@/components/dashboard/DropCard";

import { EmptyState } from "@/components/shared/EmptyState";

import { Skeleton } from "@/components/ui/skeleton";

import { useRecentDrops } from "@/hooks/useDrops";

import { staggerContainer, fadeUpItem } from "@/lib/motion";

export default function DropsPage() {

  const { data, isLoading } = useRecentDrops(60);

  const drops = data?.data ?? [];

  return (

    <div className="mx-auto max-w-[1100px] space-y-5">

      <div>

        <h2 className="text-lg font-semibold tracking-[var(--tracking-tight)]">Live Drops</h2>

        <p className="mt-0.5 text-sm text-[var(--color-fg-tertiary)]">

          Everything DropHawk has caught, newest first.

        </p>

      </div>

      {isLoading ? (

        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">

          {Array.from({ length: 6 }).map((_, i) => (

            <Skeleton key={i} className="h-[148px] rounded-[var(--radius-lg)]" />

          ))}

        </div>

      ) : drops.length === 0 ? (

        <EmptyState

          icon={Inbox}

          title="No drops yet"

          description="As soon as a tracked event changes state, it shows up here."

        />

      ) : (

        <motion.div

          variants={staggerContainer}

          initial="initial"

          animate="animate"

          className="grid grid-cols-1 gap-3 md:grid-cols-2"

        >

          {drops.map((drop) => (

            <motion.div key={drop.id} variants={fadeUpItem}>

              <DropCard drop={drop} />

            </motion.div>

          ))}

        </motion.div>

      )}

    </div>

  );

}