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

interface ProductCardProps {
  title: string
  description: string
  icon: LucideIcon
}

export default function ProductCard({ title, description, icon: Icon }: ProductCardProps) {
  return (
    <Card className="bg-black/50 border-zinc-800 overflow-hidden group transition-all duration-300 hover:scale-105 hover:border-[#4AFF8F]/50 hover:shadow-[0_0_30px_rgba(74,255,143,0.15)]">
      <CardContent className="p-6">
        <div className="mb-4">
          <Icon className="w-12 h-12 text-[#4AFF8F] group-hover:scale-110 transition-transform" />
        </div>
        <h3 className="text-xl font-bold mb-2">{title}</h3>
        <p className="text-zinc-400">{description}</p>
      </CardContent>
    </Card>
  )
}