import ClientRow from "@/src/components/general/client-row";
import type {
    BUN_SQLITE_WGUI_CLIENTS,
    BUN_SQLITE_WGUI_CLIENT_RULES,
} from "@/db/types/db";

type Props = {
    clients: BUN_SQLITE_WGUI_CLIENTS[];
    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
    accessLabel?: string;
    minWidthClass?: string;
};

const thClass =
    "px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.08em] " +
    "text-foreground-light/40 dark:text-foreground-dark/40 whitespace-nowrap";

const thRightClass = `${thClass} text-right`;

export default function ClientsTable({
    clients,
    rules_by_client_id,
    accessLabel = "Access",
    minWidthClass = "min-w-[860px]",
}: Props) {
    return (
        <div className="overflow-x-auto w-full">
            <table className={`w-full ${minWidthClass}`}>
                <thead className="w-full">
                    <tr className="border-y border-slate-200 dark:border-white/10 bg-foreground-light/[0.02] dark:bg-foreground-dark/[0.03] w-full">
                        <th className={thClass}>Client</th>
                        <th className={thClass}>Host</th>
                        <th className={thClass}>Tunnel IP</th>
                        <th className={thClass}>Allowed IPs</th>
                        <th className={thClass}>{accessLabel}</th>
                        <th className={thClass}>Public key</th>
                        <th className={thRightClass}>Created</th>
                        <th className={thRightClass}>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {clients.map((client) => (
                        <ClientRow
                            key={client.id}
                            client={client}
                            rules={
                                client.id
                                    ? rules_by_client_id.get(Number(client.id))
                                    : undefined
                            }
                        />
                    ))}
                </tbody>
            </table>
        </div>
    );
}