import Card from '@/components/site/card';
import Icon from '@/components/site/icon';

type StepCardProps = {
    step: string;
    title: string;
    description: string;
    icon?: string;
    /** Duration or phase label shown next to the number. */
    badge?: string;
    footer?: { icon: string; label: string };
};

export default function StepCard({
    step,
    title,
    description,
    icon,
    badge,
    footer,
}: StepCardProps) {
    return (
        <Card interactive className="flex flex-col justify-between">
            <div>
                <div className="flex items-center justify-between pb-5">
                    <span className="font-display text-headline-xl text-outline-variant group-hover:text-primary font-extrabold transition-colors">
                        {step}
                    </span>
                    {badge && (
                        <span className="bg-surface-container text-primary rounded px-2.5 py-1 font-mono text-[11px] font-semibold">
                            {badge}
                        </span>
                    )}
                    {icon && !badge && (
                        <Icon
                            name={icon}
                            className="text-on-surface-variant text-2xl"
                        />
                    )}
                </div>
                <h3 className="font-display text-on-surface pb-2 text-lg font-bold">
                    {title}
                </h3>
                <p className="text-on-surface-variant text-sm leading-relaxed">
                    {description}
                </p>
            </div>
            {footer && (
                <div className="border-outline-variant/30 text-on-surface-variant mt-6 flex items-center gap-2 border-t pt-5 font-mono text-[11px] uppercase">
                    <Icon name={footer.icon} className="text-primary text-sm" />
                    {footer.label}
                </div>
            )}
        </Card>
    );
}