"use client";

import { deleteItems } from "@/actions/deleteItem";
import { PencilIcon } from "lucide-react";
import Link from "next/link";
import { Button } from "../ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";

type ItemProps = {
  id: string
  name: string
  slug: string
  description: string | null
  sortIndex: number
}

export default function ItemList({ items, type }: { items: ItemProps[], type: string }) {
  // const [isMounted, setIsMounted] = useState(false);

  // useEffect(() => {
  //   setIsMounted(true);
  // }, []);

  const handleDelete = (id: string) => {
    deleteItems(id, type);
  };

  // if (!isMounted) return null;

  return (
    <div className="space-y-4">
      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
        {items.map(item => (
          <div key={item.id}>
            <Card>
              <CardHeader>
                <CardTitle className="text-xl truncate">{item.name}</CardTitle>
                <CardDescription></CardDescription>
              </CardHeader>
              <CardContent className="flex flex-col justify-start gap-4">
                {/* {item.type === 'image' && (
                  <Image
                    src={`/api/image/thumbnail/${item.fileKey}.webp`}
                    alt={item.altText || item.name}
                    width={200}
                    height={200}
                    className="w-full h-auto object-cover"
                  />
                )} */}
              </CardContent>
              <CardFooter className="flex flex-col gap-2">
                <Link
                  href={`/${type}/${item.id}`}
                  className="w-full"
                >
                  <Button variant="default" className="w-full flex items-center gap-2">
                    <PencilIcon className="h-4 w-4" />
                    Edit
                  </Button>
                </Link>
                <Button
                  variant="destructive"
                  className="w-full"
                  onClick={() => handleDelete(item.id)}
                >
                  Delete
                </Button>
              </CardFooter>
            </Card>
          </div>
        ))}
      </div>
    </div>
  );
}