import { useState } from "react";
import RecordsTab from "@/features/local/RecordsTab";
import ZonesTab from "@/features/local/ZonesTab";
import { focusRing } from "@/ui/classes";

type Tab = "records" | "zones";

function TabButton({
	id,
	controls,
	selected,
	onClick,
	children,
}: {
	id: string;
	controls: string;
	selected: boolean;
	onClick: () => void;
	children: string;
}) {
	return (
		<button
			type="button"
			role="tab"
			id={id}
			aria-controls={controls}
			aria-selected={selected}
			onClick={onClick}
			className={`-mb-px border-b-2 px-3 py-2 font-medium ${focusRing} ${
				selected
					? "border-blue-600 text-blue-600 dark:text-blue-400"
					: "border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
			}`}
		>
			{children}
		</button>
	);
}

export default function LocalDnsPage() {
	const [tab, setTab] = useState<Tab>("records");

	return (
		<section>
			<h1 className="text-2xl font-semibold">Local DNS</h1>
			<div
				role="tablist"
				aria-label="Local DNS"
				className="mt-4 flex gap-2 border-b border-zinc-200 dark:border-zinc-800"
			>
				<TabButton
					id="tab-records"
					controls="panel-records"
					selected={tab === "records"}
					onClick={() => setTab("records")}
				>
					Records
				</TabButton>
				<TabButton
					id="tab-zones"
					controls="panel-zones"
					selected={tab === "zones"}
					onClick={() => setTab("zones")}
				>
					Forward zones
				</TabButton>
			</div>
			{tab === "records" ? (
				<div role="tabpanel" id="panel-records" aria-labelledby="tab-records">
					<RecordsTab />
				</div>
			) : (
				<div role="tabpanel" id="panel-zones" aria-labelledby="tab-zones">
					<ZonesTab />
				</div>
			)}
		</section>
	);
}
