import Link from '@/Components/Link';
interface Props {
    ad: string;
    aciklama: string;
    icon: any;
    color: 'blue' | 'emerald' | 'amber' | 'rose' | 'purple' | 'orange';
    href: string;
}

const RENKLER: Record<string, { bg: string; text: string; ring: string }> = {
    blue:    { bg: 'bg-blue-50',    text: 'text-blue-700',    ring: 'group-hover:ring-blue-200' },
    emerald: { bg: 'bg-emerald-50', text: 'text-emerald-700', ring: 'group-hover:ring-emerald-200' },
    amber:   { bg: 'bg-amber-50',   text: 'text-amber-700',   ring: 'group-hover:ring-amber-200' },
    rose:    { bg: 'bg-rose-50',    text: 'text-rose-700',    ring: 'group-hover:ring-rose-200' },
    purple:  { bg: 'bg-purple-50',  text: 'text-purple-700',  ring: 'group-hover:ring-purple-200' },
    orange:  { bg: 'bg-orange-50',  text: 'text-orange-700',  ring: 'group-hover:ring-orange-200' },
};

export default function RaporKart({ ad, aciklama, icon: Icon, color, href }: Props) {
    const c = RENKLER[color];
    return (
        <Link href={href}
            className={`group rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition hover:shadow-lg hover:ring-4 ${c.ring}`}
        >
            <div className="flex items-start gap-4">
                <div className={`rounded-lg ${c.bg} ${c.text} p-3`}>
                    <Icon className="h-6 w-6" />
                </div>
                <div className="flex-1">
                    <h3 className="text-base font-semibold text-slate-900">{ad}</h3>
                    <p className="mt-1 text-sm text-slate-600">{aciklama}</p>
                    <div className="mt-3 text-sm font-medium text-blue-600 group-hover:translate-x-0.5 transition">
                        Aç →
                    </div>
                </div>
            </div>
        </Link>
    );
}