import { appRoutes } from "@/config";
import { Category } from "@/server/db/schema";
import Link from "next/link";
import React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { AspectRatio } from "../ui/aspect-ratio";
import { CATEGORY_BANNER_ASPECT_RATIO } from "./category-form";
import Image from "next/image";
import { Icons } from "../icons";

function CategoryCard({
  name,
  slug,
  createdAt,
  image,
}: Pick<Category, "name" | "slug" | "createdAt" | "image">) {
  return (
    <Link href={appRoutes.category(slug)}>
      <Card className="overflow-hidden">
        {/* <AspectRatio
          className="flex items-center justify-center bg-muted text-muted-foreground"
          ratio={CATEGORY_BANNER_ASPECT_RATIO}
        >
          {image?.length ? (
            <Image
              src={image}
              alt="Kategorie-bild"
              fill
              className="object-cover"
            />
          ) : (
            <Icons.logo />
          )}
        </AspectRatio> */}
        <CardHeader>
          <CardTitle>{name}</CardTitle>
        </CardHeader>
      </Card>
    </Link>
  );
}

export default CategoryCard;