57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
import Link from "next/link";
|
|
import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
|
|
|
|
export default function PetProfile({ petName, petSpecies, petBreed, petAge, petStatus, petPrice }) {
|
|
return (
|
|
<div className="pet-detail-card">
|
|
<div className="pet-detail-image-wrapper">
|
|
<span className="pet-detail-emoji">{getSpeciesEmoji(petSpecies)}</span>
|
|
</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" className="pet-detail-cta-btn">
|
|
Schedule an Appointment
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|