import React, { type ReactNode } from "react";
import { cn } from "../lib/utils";
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
import { Badge } from "./ui/badge";

interface FeatureCardProps {
    title: string;
    category: string;
    description?: string;
    icon?: ReactNode;
    children?: ReactNode;
    className?: string;
    delay?: number; // Animation delay in ms or generic unit
}

export function FeatureCard({
    title,
    category,
    description,
    icon,
    children,
    className,
}: FeatureCardProps) {
    return (
        <Card className={cn(
            "glass-card border-none hover-lift transition-all animate-in slide-up group overflow-hidden",
            className
        )}>
            {icon && (
                <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
                    {icon}
                </div>
            )}
            <CardHeader>
                <Badge variant="glass" className="w-fit mb-2">{category}</Badge>
                <CardTitle className="text-xl text-primary">{title}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                {description && (
                    <p className="text-muted-foreground text-step--1">
                        {description}
                    </p>
                )}
                {children}
            </CardContent>
        </Card>
    );
}