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";

interface ProductCardProps {
  library: BaseLibrary;
}

export default function ProductCard({ library }: ProductCardProps) {
  const labels = attributeLabels[library.type];
  return (
    <Link href={library.url}  className="relative top-1 flex flex-col w-full overflow-hidden transition-all duration-200 hover:-top-1">
      <div className="flex flex-col">
        <div className="relative">
          <div className="border-1">
            <div className="absolute top-2 right-2"><LikeBtn productId="20" wishType=""/></div>
          <Image
            src={library.image}
            alt={library.title}
            width={800}
            height={1000}
            className="img-responsive"
          />
        </div>
        </div>
      </div>
      <div className="mt-2 flex flex-col">
        <span className="hidden text-xs capitalize">{library.type}</span>
        <h4 className="med">{library.title}</h4>
      </div>
      <div className="flex flex-col gap-1 py-1">
        <div className="flex flex-col md:flex-row items-start md:items-center align-middle">
          <span className="text-xs/3 text-gray-950/50 uppercase">
            {labels.attr1}:{" "}
          </span>
          <span className="text-xs font-medium capitalize">
            {library.attribute1}
          </span>
        </div>
        <div className="flex flex-col md:flex-row items-start md:items-center align-middle">
          <span className="text-xs/3 text-gray-950/50 uppercase">
            {labels.attr2}:{" "}
          </span>
          <span className="text-xs font-medium capitalize">
            {library.attribute2}
          </span>
        </div>
        {library.attribute3 && (
          <div className="flex flex-col md:flex-row items-start md:items-center align-middle">
            <span className="text-xs/3 text-gray-950/50 uppercase">
              {labels.attr3}:{" "}
            </span>
            <span className="text-xs font-medium capitalize">
              {library.attribute3}
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}