import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';

export type KartRenk = 'blue' | 'emerald' | 'amber' | 'rose' | 'purple' | 'slate' | 'indigo' | 'cyan';

const RENK: Record<KartRenk, { kutu: string; deger: string }> = {
    blue:    { kutu: 'bg-blue-50 text-blue-700',       deger: 'text-slate-900' },
    emerald: { kutu: 'bg-emerald-50 text-emerald-700', deger: 'text-emerald-700' },
    amber:   { kutu: 'bg-amber-50 text-amber-700',     deger: 'text-slate-900' },
    rose:    { kutu: 'bg-rose-50 text-rose-700',       deger: 'text-rose-700' },
    purple:  { kutu: 'bg-purple-50 text-purple-700',   deger: 'text-slate-900' },
    slate:   { kutu: 'bg-slate-100 text-slate-700',    deger: 'text-slate-900' },
    indigo:  { kutu: 'bg-indigo-50 text-indigo-700',   deger: 'text-slate-900' },
    cyan:    { kutu: 'bg-cyan-50 text-cyan-700',       deger: 'text-slate-900' },
};

interface Props {
    baslik: string;
    deger: ReactNode;
    ikon: LucideIcon;
    renk?: KartRenk;
    /** Ana değerin altına küçük açıklama — örn. "geçen aya göre" */
    altBilgi?: ReactNode;
}

/**
 * Rapor sayfalarının özet kartı.
 * Tüm raporlarda aynı görünsün diye tek yerde tanımlıdır — her sayfada
 * ayrı ayrı yazılmış kopyaların yerini alır.
 */
export default function RaporKart({ baslik, deger, ikon: Icon, renk = 'blue', altBilgi }: Props) {
    const r = RENK[renk];
    return (
        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <div className="flex items-start gap-3">
                <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${r.kutu}`}>
                    <Icon className="h-5 w-5" />
                </div>
                <div className="min-w-0 flex-1">
                    <div className="truncate text-[11px] font-medium uppercase tracking-wide text-slate-500" title={baslik}>
                        {baslik}
                    </div>
                    <div className={`truncate text-xl font-bold sm:text-2xl ${r.deger}`}>{deger}</div>
                    {altBilgi && <div className="mt-0.5 truncate text-[11px] text-slate-500">{altBilgi}</div>}
                </div>
            </div>
        </div>
    );
}