import * as stylex from "@stylexjs/stylex";
import RecordsTab from "@/features/local/RecordsTab";
import ZonesTab from "@/features/local/ZonesTab";
import Tabs from "@/ui/Tabs";

const styles = stylex.create({
	heading: {
		fontSize: "1.5rem",
		lineHeight: "2rem",
		fontWeight: 600,
	},
});

export default function LocalDnsPage() {
	return (
		<section>
			<h1 {...stylex.props(styles.heading)}>Local DNS</h1>
			<Tabs
				label="Local DNS"
				tabs={[
					{ id: "records", label: "Records", content: <RecordsTab /> },
					{ id: "zones", label: "Forward zones", content: <ZonesTab /> },
				]}
			/>
		</section>
	);
}