import Image from 'next/image';
import Link from 'next/link';
import type { Toy } from '@/types';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { DollarSign, MapPin, Tag } from 'lucide-react';

interface ToyCardProps {
  toy: Toy & { dataAiHint?: string }; // dataAiHint is for placeholder, not part of core Toy type
}

export default function ToyCard({ toy }: ToyCardProps) {
  const primaryImage = toy.images && toy.images.length > 0 ? toy.images[0] : 'https://placehold.co/300x200.png';
  const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";

  return (
    <Card className="flex flex-col h-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 rounded-lg">
      <CardHeader className="p-0">
        <div className="aspect-[3/2] relative w-full">
          <Image
            src={primaryImage}
            alt={toy.name}
            layout="fill"
            objectFit="cover"
            data-ai-hint={placeholderHint}
            className="rounded-t-lg"
          />
        </div>
      </CardHeader>
      <CardContent className="p-4 flex-grow">
        <CardTitle className="text-lg font-headline mb-2 truncate" title={toy.name}>{toy.name}</CardTitle>
        <div className="text-sm text-muted-foreground space-y-1">
          <div className="flex items-center">
            <Tag className="h-4 w-4 mr-2 text-accent" />
            <span>{toy.category}</span>
          </div>
          {toy.location && (
            <div className="flex items-center">
              <MapPin className="h-4 w-4 mr-2 text-accent" />
              <span>{toy.location}</span>
            </div>
          )}
          {toy.pricePerDay !== undefined && (
             <div className="flex items-center font-semibold text-foreground">
              <DollarSign className="h-4 w-4 mr-1 text-accent" />
              <span>{toy.pricePerDay > 0 ? `${toy.pricePerDay}/day` : 'Free'}</span>
            </div>
          )}
        </div>
      </CardContent>
      <CardFooter className="p-4 border-t">
        <Link href={`/toys/${toy.id}`} passHref className="w-full">
          <Button variant="default" className="w-full transition-transform transform hover:scale-105">
            View Details
          </Button>
        </Link>
      </CardFooter>
    </Card>
  );
}