import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { Info, type LucideIcon } from 'lucide-react';

interface KpiStatTileProps {
    label: string;
    value: string;
    unit?: string;
    icon: LucideIcon;
    hint?: string;
    accent?: string; // tailwind text colour for the icon, e.g. 'text-emerald-600'
}

/**
 * A single headline metric: icon + label + big number + unit, with an optional
 * info tooltip explaining what the metric means.
 */
export default function KpiStatTile({ label, value, unit, icon: Icon, hint, accent = 'text-secondary' }: KpiStatTileProps) {
    return (
        <div className="rounded-xl border bg-white/90 p-4 shadow-sm">
            <div className="text-muted-foreground flex items-center gap-2 text-xs font-medium">
                <Icon className={cn('h-4 w-4', accent)} />
                <span>{label}</span>
                {hint && (
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Info className="text-muted-foreground/60 h-3.5 w-3.5 cursor-help" />
                        </TooltipTrigger>
                        <TooltipContent className="max-w-[220px] bg-white text-xs text-gray-700">{hint}</TooltipContent>
                    </Tooltip>
                )}
            </div>
            <div className="mt-2 flex items-baseline gap-1">
                <span className="text-2xl font-semibold tabular-nums">{value}</span>
                {unit && <span className="text-muted-foreground text-sm">{unit}</span>}
            </div>
        </div>
    );
}