import { Play } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

interface VideoCardProps {
  title: string
  description: string
  thumbnail: string
  youtubeUrl: string
}

export function VideoCard({
  title,
  description,
  thumbnail,
  youtubeUrl,
}: VideoCardProps) {
  return (
    <a href={youtubeUrl} target="_blank" rel="noopener noreferrer">
      <Card className="overflow-hidden hover:shadow-lg transition-shadow group cursor-pointer">
        <div className="relative aspect-video">
          <img
            src={thumbnail}
            alt={title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
            <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <Play className="w-8 h-8 text-[#8BC34A] ml-1" />
            </div>
          </div>
        </div>
        <CardContent className="pt-4 space-y-2">
          <h3 className="font-bold text-lg">{title}</h3>
          <p className="text-muted-foreground text-sm leading-relaxed">
            {description}
          </p>
        </CardContent>
      </Card>
    </a>
  )
}