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

export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl }) {
  return (
    <div className="pet-detail-card">
      <div className="pet-detail-image-wrapper">
        <img src={imageUrl || "/images/pet-placeholder.png"} alt={petName} className="pet-detail-image" />
      </div>

      <div className="pet-detail-info">
        <div className="pet-detail-header">
          <h1 className="pet-detail-name">{petName}</h1>
          <span className={`pet-card-status ${getStatusClass(petStatus)}`}>
            {petStatus}
          </span>
        </div>

        <div className="pet-detail-fields">
          <div className="pet-detail-row">
            <span className="pet-detail-label">Species</span>
            <span className="pet-detail-value">{petSpecies ?? "—"}</span>
          </div>
          <div className="pet-detail-row">
            <span className="pet-detail-label">Breed</span>
            <span className="pet-detail-value">{petBreed ?? "—"}</span>
          </div>
          <div className="pet-detail-row">
            <span className="pet-detail-label">Age</span>
            <span className="pet-detail-value">
              {petAge != null ? `${petAge} ${petAge === 1 ? "year" : "years"}` : "—"}
            </span>
          </div>
          <div className="pet-detail-row">
            <span className="pet-detail-label">Adoption Fee</span>
            <span className="pet-detail-value pet-detail-price">
              {petPrice != null ? `$${parseFloat(petPrice).toFixed(2)}` : "—"}
            </span>
          </div>
        </div>

        {/* Status */}
        {petStatus?.toLowerCase() === "available" && (
          <div className="pet-detail-cta">
            <p className="pet-detail-cta-text">
              Interested in adopting {petName}? Visit us in store or schedule an appointment.
            </p>
            <Link href={`/appointments?petId=${petId}`} className="pet-detail-cta-btn">
              Schedule an Appointment
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}