import Link from "next/link";
import Image from "next/image";
import { prisma } from "@/lib/prisma";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { getCardImageUrl, shouldBypassImageOptimizer } from "@/lib/cards";

export default async function AdminCardsPage() {
  const cards = await prisma.tarotCard.findMany({
    orderBy: { orderIndex: "asc" },
  });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">کارت‌های تاروت</h1>
      <div className="grid gap-4 grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
        {cards.map((c) => {
          const imageUrl = getCardImageUrl(c);
          return (
            <Card key={c.id} className="overflow-hidden">
              <div className="relative aspect-[200/340]">
                <Image
                  src={imageUrl}
                  alt={c.nameFa}
                  fill
                  className="object-cover"
                  sizes="100px"
                  unoptimized={shouldBypassImageOptimizer(imageUrl)}
                />
              </div>
              <CardContent className="p-2">
                <p className="text-xs truncate">{c.nameFa}</p>
                <Button asChild variant="ghost" size="sm" className="mt-1 w-full">
                  <Link href={`/admin/cards/${c.id}`}>ویرایش</Link>
                </Button>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}