import type { AttentionItem } from '@/types/admin';
import { Link } from '@inertiajs/react';
import {
    ChevronRight,
    Hourglass,
    LifeBuoy,
    PauseCircle,
    UserMinus,
} from 'lucide-react';

const attentionIcons: Record<
    AttentionItem['key'],
    { icon: React.ComponentType<{ className?: string }>; color: string }
> = {
    churn: {
        icon: UserMinus,
        color: 'bg-rose-400/20 text-rose-600 dark:bg-rose-400/15 dark:text-rose-400',
    },
    pending: {
        icon: Hourglass,
        color: 'bg-amber-400/20 text-amber-600 dark:bg-amber-400/15 dark:text-amber-400',
    },
    suspended: {
        icon: PauseCircle,
        color: 'bg-red-400/20 text-red-600 dark:bg-red-400/15 dark:text-red-400',
    },
    tickets: {
        icon: LifeBuoy,
        color: 'bg-sky-400/20 text-sky-600 dark:bg-sky-400/15 dark:text-sky-400',
    },
};

export default function AttentionRow({
    attention,
}: {
    attention: AttentionItem[];
}) {
    return (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {attention.map((a) => {
                const { icon: Icon, color } = attentionIcons[a.key];
                return (
                    <Link
                        key={a.key}
                        href={a.href}
                        className="pf-glass group flex items-center gap-3.5 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-2xl"
                    >
                        <div
                            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${color}`}
                        >
                            <Icon className="h-4.5 w-4.5" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <p className="pf-mono text-foreground text-lg leading-tight font-bold">
                                {a.value.toLocaleString()}
                            </p>
                            <p className="text-muted-foreground text-xs font-medium">
                                {a.label}
                            </p>
                            <p className="text-muted-foreground dark:text-muted-foreground/70 truncate text-[11px]">
                                {a.sub}
                            </p>
                        </div>
                        <ChevronRight className="text-muted-foreground h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
                    </Link>
                );
            })}
        </div>
    );
}