import { type ReactNode } from 'react';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface ExperienceCardProps {
    image: string;
    title: string;
    description: string;
    category: string;
    rating: number;
    price: string;
    duration: string;
    location: string;
    className?: string;
}

export default function ExperienceCard({
    image,
    title,
    description,
    category,
    rating,
    price,
    duration,
    location,
    className
}: ExperienceCardProps) {
    const renderStars = (rating: number) => {
        return Array.from({ length: 5 }, (_, i) => (
            <svg
                key={i}
                className={cn(
                    "w-4 h-4",
                    i < rating ? "text-yellow-400 fill-current" : "text-gray-300"
                )}
                viewBox="0 0 20 20"
            >
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
        ));
    };

    return (
        <Card className={cn("group cursor-pointer hover:shadow-lg transition-all duration-300 overflow-hidden py-0", className)}>
            <div className="relative aspect-[4/3] overflow-hidden">
                <img 
                    src={image}
                    alt={title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    loading="lazy"
                    onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop&crop=center';
                    }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" />
                <Badge className="absolute top-4 left-4 bg-white/95 text-gray-900 shadow-md backdrop-blur-sm">
                    {category}
                </Badge>
                <Badge className="absolute top-4 right-4 bg-primary text-primary-foreground shadow-md font-semibold">
                    {price}
                </Badge>
            </div>
            
            <div className="p-6 pb-6">
                <div className="space-y-3">
                    <div className="space-y-2">
                        <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-1">
                            {title}
                        </h3>
                        <p className="text-sm text-muted-foreground flex items-center gap-1">
                            <svg className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            {location}
                        </p>
                    </div>
                    
                    <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
                        {description}
                    </p>
                    
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-1">
                            {renderStars(rating)}
                            <span className="text-sm font-medium text-foreground ml-1">({rating})</span>
                        </div>
                        <div className="flex items-center gap-1 text-sm text-muted-foreground">
                            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>{duration}</span>
                        </div>
                    </div>
                </div>
            </div>
        </Card>
    );
}