nihonbuzz-academy/resources/js/Components/CourseCard.tsx

import { Card, CardContent, CardHeader } from "@/Components/ui/card";
import { Progress } from "@/Components/ui/progress";
import { Badge } from "@/Components/ui/badge";
import { Link } from "@inertiajs/react";
import { Play } from "lucide-react";

interface CourseCardProps {
    title: string;
    thumbnail: string;
    level: string;
    progress: number;
    lessonsCount: number;
    completedLessons: number;
    slug: string;
}

export default function CourseCard({
    title,
    thumbnail,
    level,
    progress,
    lessonsCount,
    completedLessons,
    slug
}: CourseCardProps) {
    return (
        <div className="relative group">
            {/* Hover Glow Effect */}
            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-orange-500/5 to-transparent blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl" />
            
            <Card className="relative overflow-hidden transition-all duration-500 group-hover:border-primary/50 group-hover:-translate-y-1 rounded-2xl">
                <div className="relative aspect-[16/9] overflow-hidden">
                    <img 
                        src={thumbnail || "/brand/Nihonbuzz-Academy-Logo-Branding-Pattern-Landscape.png"} 
                        alt={title}
                        className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
                        <div className="w-12 h-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-500">
                            <Play className="w-5 h-5 fill-current ml-1" />
                        </div>
                    </div>
                    <Badge className="absolute top-3 left-3 bg-background/80 text-primary hover:bg-background border-none backdrop-blur-md shadow-sm font-bold text-[10px] px-3">
                        {level}
                    </Badge>
                </div>
                
                <CardHeader className="p-5 space-y-1.5">
                    <h3 className="font-bold text-foreground line-clamp-1 group-hover:text-primary transition-colors text-base duration-300">
                        {title}
                    </h3>
                    <div className="flex items-center gap-2 text-[11px] text-muted-foreground font-medium">
                        <Badge variant="secondary" className="bg-muted text-muted-foreground border-none font-semibold px-2 h-5">
                             {completedLessons}/{lessonsCount} Lessons
                        </Badge>
                        <span className="w-1 h-1 rounded-full bg-muted-foreground/30" />
                        <span>{progress}% Complete</span>
                    </div>
                </CardHeader>
                
                <CardContent className="px-5 pb-5">
                    <div className="space-y-4">
                        <Progress value={progress} className="h-1.5 bg-muted" />
                        <Link 
                            href={route('courses.learn', { course: slug })} 
                            className="flex items-center justify-center gap-2 w-full py-2.5 text-xs font-bold rounded-xl bg-muted/50 text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300"
                        >
                            Lanjutkan Belajar
                            <Play className="w-3 h-3 fill-current" />
                        </Link>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}