import type { ReactNode } from 'react';
import Card from '@/components/site/card';
import Icon from '@/components/site/icon';
import IconTile from '@/components/site/icon-tile';
import { cn } from '@/lib/utils';

type FeatureCardProps = {
    icon: string;
    title: ReactNode;
    description: ReactNode;
    /** Small label shown opposite the icon, e.g. "01 / JASA RESMI". */
    tag?: string;
    /** Outcome line separated by a divider at the bottom of the card. */
    footer?: string;
    iconTone?: 'soft' | 'solid' | 'neutral';
    className?: string;
};

export default function FeatureCard({
    icon,
    title,
    description,
    tag,
    footer,
    iconTone = 'soft',
    className,
}: FeatureCardProps) {
    return (
        <Card
            interactive
            className={cn('flex flex-col justify-between', className)}
        >
            <div className="flex flex-col gap-3">
                <div className="flex items-center justify-between gap-3">
                    <IconTile icon={icon} tone={iconTone} groupHover />
                    {tag && (
                        <span className="text-primary font-mono text-[11px] font-bold">
                            {tag}
                        </span>
                    )}
                </div>
                <h3 className="font-display text-on-surface 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-highlight mt-4 flex items-center gap-1.5 border-t pt-4 font-mono text-[11px]">
                    <Icon name="done" className="text-sm" />
                    <span>{footer}</span>
                </div>
            )}
        </Card>
    );
}