import { TrendingUp, TrendingDown } from 'lucide-react';

export function TrendWidget({ title, value, unit = 'number', changePercent }: {
    title: string; value: number | null; unit?: string; changePercent?: number | null;
}) {
    const fmt = (v: number | null) => {
        if (v === null) return '—';
        if (unit === 'currency') return '$' + v.toLocaleString();
        if (unit === 'percent') return v + '%';
        return v.toLocaleString();
    };
    const up = (changePercent ?? 0) >= 0;

    return (
        <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
            <p className="text-xs font-medium text-muted-foreground">{title}</p>
            <div className="mt-2 flex items-baseline gap-2">
                <span className="text-2xl font-semibold text-foreground">{fmt(value)}</span>
                {changePercent !== null && changePercent !== undefined && (
                    <span className={`inline-flex items-center gap-0.5 text-xs font-medium ${up ? 'text-emerald-600' : 'text-destructive'}`}>
                        {up ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
                        {Math.abs(changePercent)}%
                    </span>
                )}
            </div>
        </div>
    );
}