import Image from "next/image";
import Link from "next/link";
import { BaseLibrary } from "./LibraryType";
import { attributeLabels } from "./AttributeLabels";
import LikeBtn from "@/app/components/cards/like-btn";
import { AWS_CDN_URL } from "@/utils/staticValues";

interface ProductCardProps {
  library: BaseLibrary;
}

export default function SilhouetteCard({ library }: ProductCardProps) {
  
  const labels = attributeLabels[library.type];
  // Safely compute extra vibes count without using non-null assertion on optional chain
  const extraVibes = Math.max(0, (library.vibes_arr?.length ?? 0) - 3);
  return (
    <Link
      href={library.url}
      className="relative z-10 flex flex-col w-full top-1 overflow-hidden transition-all duration-200 hover:-top-1"
    >
      <div className="flex flex-col">
        <div className="relative">
          <div className="">
            <div className="absolute top-1 right-1">
              <LikeBtn productId={library.id} wishType="SILHOUETTES" />
            </div>
            <Image
              src={`${AWS_CDN_URL}/${library.image}`}
              alt={library.title}
              width={800}
              height={1000}
              className="img-responsive"
            />
          </div>
        </div>
      </div>
      <div className="mt-3 flex flex-col">
        <span className="hidden text-xs capitalize"></span>
        <h4 className="med line-clamp-2 h-8">{library.title}</h4>
      </div>
      <div className="flex flex-col gap-1 py-1">
        {library?.gender && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              Gender:
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.gender}
            </span>
          </div>
        )}
        {library?.category && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              Category:
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.category}
            </span>
          </div>
        )}
        {library?.vibes && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">Vibe:</span>
            <span className="text-xs font-medium capitalize">
              {library?.vibes}
              {extraVibes > 0 && (
                <span className="text-xs text-gray-500"> +{extraVibes} more vibes</span>
              )}
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}