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

  const labels = attributeLabels[library.type];
  return (
    <Link
      href={library.url}
      className="relative z-10 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 border-gray-950/50 hover:border-gray-950">
            <div className="absolute top-1 right-1">
              <LikeBtn productId={library.id} wishType="ARTWORK" />
            </div>
            <Image
              src={`${AWS_CDN_URL}/${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"></span>
        <h4 className="med line-clamp-2 h-8">{library.label}</h4>
      </div>
      <div className="flex flex-col gap-1 py-1">
        {library?.art_style && (
          <div className="flex flex-col items-start align-middle">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              Art Style:
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.art_style}
            </span>
          </div>
        )}
        {library?.artist_name && (
          <div className="flex flex-col items-start align-middle">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              artist:
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.artist_name}
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}