import Link from "next/link";
import { getStatusClass } from "@/components/petUtils";

//Card shown in the adopt grid, links to the pet's detail page
export default function PetCard({petId, petName, petSpecies, petStatus, imageUrl}) {
  return (
    <Link href={`/adopt/${petId}`} className="no-underline text-inherit flex flex-col rounded-2xl overflow-hidden shadow-[0_4px_12px_rgba(0,0,0,0.08)] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.13)] bg-white">
      <div className="bg-[#fff8ee] flex items-center justify-center aspect-square">
        <img
          src={imageUrl || "/images/pet-placeholder.png"}
          alt={petName}
          className="w-full h-full object-cover"
          onError={(e) => {
            e.currentTarget.onerror = null;
            e.currentTarget.src = "/images/pet-placeholder.png";
          }}
        />
      </div>
      <div className="px-3 pt-[0.6rem] pb-3 flex flex-col gap-[0.2rem]">
        <h3 className="text-[0.95rem] font-bold text-[#222] m-0 truncate">{petName}</h3>
        <p className="text-[0.8rem] text-[#666] m-0">{petSpecies}</p>
        <span className={`inline-block mt-[0.2rem] px-2 py-[0.15rem] rounded-full text-[0.7rem] font-semibold capitalize w-fit ${getStatusClass(petStatus)}`}>
          {petStatus}
        </span>
      </div>
    </Link>
  );
}