import Span from "@/src/components/twui/layout/Span";
import formatUnixTimestamp from "@/src/utils/format-unix-timestamp";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";

type Props = {
    client: BUN_SQLITE_WGUI_CLIENTS;
};

export default function ClientRow({ client }: Props) {
    return (
        <tr className="border-b border-slate-200/60 dark:border-white/5 last:border-b-0 hover:bg-foreground-light/[0.02] dark:hover:bg-foreground-dark/[0.02] transition-colors">
            <td className="px-4 py-[9px]">
                <Span className="text-[13.5px] font-medium text-foreground-light dark:text-foreground-dark">
                    {client.name || "—"}
                </Span>
            </td>
            <td className="px-4 py-[9px] tabular text-[13px] text-foreground-light/60 dark:text-foreground-dark/60 whitespace-nowrap">
                {client.wg_ip_address || "—"}
            </td>
            <td className="px-4 py-[9px] tabular text-[13px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
                {client.allowed_ips || "—"}
            </td>
            <td className="px-4 py-[9px]">
                <Span className="font-mono text-[12px] text-foreground-light/45 dark:text-foreground-dark/45 whitespace-nowrap">
                    {client.public_key
                        ? `${client.public_key.slice(0, 16)}…`
                        : "—"}
                </Span>
            </td>
            <td className="px-4 py-[9px] tabular text-[12px] text-foreground-light/40 dark:text-foreground-dark/40 text-right whitespace-nowrap">
                {formatUnixTimestamp({ timestamp: client.created_at })}
            </td>
        </tr>
    );
}