import { type ReactNode } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

interface FeatureCardProps {
    icon: ReactNode;
    title: string;
    description: string;
    className?: string;
    iconClassName?: string;
}

export default function FeatureCard({ 
    icon, 
    title, 
    description, 
    className,
    iconClassName 
}: FeatureCardProps) {
    return (
        <Card className={cn("group hover:shadow-lg transition-all duration-300 hover:-translate-y-1", className)}>
            <CardHeader className="pb-3">
                <div className={cn(
                    "h-12 w-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 p-3 text-white shadow-lg group-hover:shadow-xl transition-all duration-300",
                    iconClassName
                )}>
                    {icon}
                </div>
            </CardHeader>
            <CardContent className="pt-0">
                <CardTitle className="text-lg font-semibold mb-2 text-foreground">
                    {title}
                </CardTitle>
                <CardDescription className="text-muted-foreground leading-relaxed">
                    {description}
                </CardDescription>
            </CardContent>
        </Card>
    );
}