import { LucideIcon } from 'lucide-react'
import Link from 'next/link'
import { cn } from '@/lib/utils'

interface FeatureCardProps {
    title: string
    description?: string
    icon: LucideIcon
    href: string
    color: 'green' | 'blue' | 'orange' | 'purple' | 'red'
    className?: string
}

export function FeatureCard({ title, description, icon: Icon, href, color, className }: FeatureCardProps) {
    const colorStyles = {
        green: 'border-green-500 text-green-600',
        blue: 'border-blue-500 text-blue-600',
        orange: 'border-orange-500 text-orange-600',
        purple: 'border-purple-500 text-purple-600',
        red: 'border-red-500 text-red-600',
    }

    const iconBgStyles = {
        green: 'bg-green-50 text-green-600 border-green-200',
        blue: 'bg-blue-50 text-blue-600 border-blue-200',
        orange: 'bg-orange-50 text-orange-600 border-orange-200',
        purple: 'bg-purple-50 text-purple-600 border-purple-200',
        red: 'bg-red-50 text-red-600 border-red-200',
    }

    return (
        <Link href={href} className={cn("block group h-full", className)}>
            <div className={cn(
                "h-full bg-white rounded-xl p-6 transition-all duration-300 relative overflow-hidden group-hover:-translate-y-1",
                "border-2 hover:shadow-lg",
                colorStyles[color]
            )}>
                <div className="flex flex-col items-center text-center h-full">
                    <div className={cn("w-16 h-16 rounded-full flex items-center justify-center mb-4 border-2 transition-transform group-hover:scale-110", iconBgStyles[color])}>
                        <Icon className="w-8 h-8" />
                    </div>

                    <h3 className="text-xl font-bold mb-2 text-black">{title}</h3>
                    {description && (
                        <p className="text-gray-500 text-sm leading-relaxed">{description}</p>
                    )}
                </div>
            </div>
        </Link>
    )
}