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 bg-gray-100 mob-noise 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="TECHNIQUE" />
            </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?.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?.complexity_level && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              complexity:{" "}
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.complexity_level}
            </span>
          </div>
        )}
         {library?.sustainability_impact && (
          <div className="flex flex-col">
            <span className="text-xs/3 text-gray-950/50 capitalize">
              Sustainability Impact:{" "}
            </span>
            <span className="text-xs font-medium capitalize">
              {library?.sustainability_impact.length > 12
                ? `${library.sustainability_impact.slice(0,12)}...`
                : library?.sustainability_impact}
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}