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 FabricCard({ library }: ProductCardProps) {

  const labels = attributeLabels[library.type];
  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="border-1 border-gray-950/50 hover:border-gray-950">
            <div className="absolute top-1 right-1">
              <LikeBtn productId={library.id} wishType="FABRIC" />
            </div>
            <Image
              src={`${AWS_CDN_URL}/${library.image}`}
              alt={library.title || "Fabric Image"}
              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?.gsm && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">GSM: </span>
            <span className="text-xs font-medium capitalize">
              {library?.gsm}
            </span>
          </div>
        )}
        {library?.finish && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              finish:
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.finish}
            </span>
          </div>
        )}
        {library?.color && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              Color:{" "}
            </span>
            <span className="text-xs font-medium capitalize flex flex-row flex-wrap items-center gap-1">
              {library?.color}
              {typeof library?.color_count === "number" && library.color_count > 3 && (
                <span className="text-xs text-gray-500">+{library.color_count - 3}</span>
              )}
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}