import type { Pet } from "@/types";
import { Card } from "@/components/ui/Card";

interface PetCardProps {
  pet: Pet;
  onClick?: () => void;
}

export function PetCard({ pet, onClick }: PetCardProps) {
  return (
    <Card onClick={onClick} className="flex items-center gap-4">
      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-100 to-orange-200 flex items-center justify-center text-2xl overflow-hidden flex-shrink-0">
        {pet.avatarUrl ? (
          <img src={pet.avatarUrl} alt={pet.name} className="w-full h-full object-cover" />
        ) : (
          "🐾"
        )}
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="font-semibold text-gray-800 truncate">{pet.name}</h3>
        <p className="text-sm text-gray-500">{pet.breed || pet.species} · {pet.weightKg}kg</p>
      </div>
      <svg className="w-5 h-5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </Card>
  );
}