import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Link } from '@inertiajs/react';
import { ExternalLink, Calendar, Building2, Sparkles } from 'lucide-react';

interface ProjectCardProps {
    project: {
        id: number;
        slug: string;
        title: string;
        client?: string;
        year?: number;
        cover?: string;
        category?: {
            id: number;
            name: string;
            slug: string;
        };
        featured?: boolean;
    };
}

export default function ProjectCard({ project }: ProjectCardProps) {
    return (
        <Card className="group overflow-hidden border-0 shadow-lg hover:shadow-2xl transition-all duration-500">
            {/* Image section with overlay */}
            <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200">
                {project.cover ? (
                    <img 
                        src={project.cover} 
                        alt={project.title}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                    />
                ) : (
                    <div className="w-full h-full flex items-center justify-center">
                        <Building2 className="w-20 h-20 text-slate-300" />
                    </div>
                )}
                
                {/* Gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                
                {/* Featured badge - top right */}
                {project.featured && (
                    <Badge className="absolute top-3 right-3 bg-gradient-to-r from-amber-500 to-orange-500 border-0 shadow-lg">
                        <Sparkles className="w-3 h-3 mr-1" />
                        Featured
                    </Badge>
                )}
                
                {/* Category badge - top left */}
                {project.category && (
                    <Badge 
                        variant="secondary" 
                        className="absolute top-3 left-3 bg-white/90 backdrop-blur-sm text-slate-700 border-0"
                    >
                        {project.category.name}
                    </Badge>
                )}
                
                {/* Year badge - bottom right on hover */}
                {project.year && (
                    <div className="absolute bottom-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <Badge variant="outline" className="bg-white/90 backdrop-blur-sm border-white/50">
                            <Calendar className="w-3 h-3 mr-1" />
                            {project.year}
                        </Badge>
                    </div>
                )}
            </div>

            <CardHeader className="pb-3">
                <CardTitle className="text-lg font-bold group-hover:text-primary transition-colors line-clamp-1">
                    {project.title}
                </CardTitle>
                
                {project.client && (
                    <CardDescription className="flex items-center gap-2 text-sm">
                        <Building2 className="w-4 h-4" />
                        {project.client}
                    </CardDescription>
                )}
            </CardHeader>

            <CardFooter className="pt-0">
                <Link 
                    href={`/portfolio/${project.slug}`}
                    className="inline-flex items-center text-sm font-medium text-primary hover:text-primary/80 transition-colors group/link"
                >
                    View Project
                    <ExternalLink className="ml-1.5 w-4 h-4 group-hover/link:translate-x-1 group-hover/link:-translate-y-1 transition-transform" />
                </Link>
            </CardFooter>
        </Card>
    );
}