import Link from "next/link";
import clsx from "clsx";

const TONE = {
    expired: "border-l-expired text-expired",
    warn: "border-l-warn text-warn",
    accent: "border-l-accent text-accent",
} as const;

export function Queue({
    title,
    count,
    tone,
    items,
}: {
    title: string;
    count: number;
    tone: keyof typeof TONE;
    items: { label: string; href: string; meta: string }[];
}) {
    return (
        <section
            className={clsx(
                "grid gap-2 rounded border border-l-4 border-rule bg-panel p-4",
                TONE[tone],
            )}
        >
            <h2 className="font-mono text-[0.72rem] font-normal uppercase tracking-[0.1em] text-ink-3">
                {title}
            </h2>
            <p className="text-3xl font-extrabold leading-none tabular-nums tracking-[-0.03em]">
                {count}
            </p>
            {items.length === 0 ? (
                <p className="text-[0.72rem] text-ink-3">Nothing to do here.</p>
            ) : (
                <ul className="grid gap-1">
                    {items.map((i) => (
                        <li
                            key={i.href}
                            className="flex justify-between gap-2 font-mono text-[0.72rem] text-ink-2"
                        >
                            <Link href={i.href} className="text-accent underline">
                                {i.label}
                            </Link>
                            <span className="tabular-nums">{i.meta}</span>
                        </li>
                    ))}
                </ul>
            )}
        </section>
    );
}