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

interface ProductCardProps {
  icon: LucideIcon
  title: string
  description: string[]
  variant?: 'default' | 'gradient'
}

export default function ProductCard({ 
  icon: Icon, 
  title, 
  description,
  variant = 'default'
}: ProductCardProps) {
  const getCardStyles = () => {
    switch (variant) {
      case 'gradient':
        return "border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300 bg-gradient-to-br from-white to-blue-50 dark:from-gray-800 dark:to-blue-900"
      default:
        return "border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300"
    }
  }

  return (
    <Card className={getCardStyles()}>
      <CardHeader>
        <Icon className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
        <CardTitle className="dark:text-gray-100">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        {description.map((text, index) => (
          <p key={index} className="text-gray-600 dark:text-gray-300 mb-4 last:mb-0">
            {text}
          </p>
        ))}
      </CardContent>
    </Card>
  )
}