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

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

export function ServiceCard({ icon: Icon, title, description }: ServiceCardProps) {
  return (
    <Card className="glow-card bg-card border-border hover:border-primary transition-all duration-300 rounded-xl">
      <CardContent className="p-6">
        <div className="flex flex-col gap-4">
          <div className="p-3 bg-primary/10 text-primary rounded-xl w-fit">
            <Icon className="w-8 h-8" />
          </div>
          <div className="flex flex-col gap-2">
            <h3 className="text-foreground font-bold text-xl">{title}</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}