"use client";

import { useAtom } from "jotai";
import { KeyRound, User } from "lucide-react";
import { useTranslations } from "next-intl";
import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { ApiKeyContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent";
import { ProfileContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent";
import { SettingsDialog } from "@/components/settings/settings-dialog";

export function UserSettingsDialog() {
	const t = useTranslations("userSettings");
	const [state, setState] = useAtom(userSettingsDialogAtom);

	const navItems = [
		{ value: "profile", label: t("profile_nav_label"), icon: <User className="h-4 w-4" /> },
		{
			value: "api-key",
			label: t("api_key_nav_label"),
			icon: <KeyRound className="h-4 w-4" />,
		},
	];

	return (
		<SettingsDialog
			open={state.open}
			onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
			title={t("title")}
			navItems={navItems}
			activeItem={state.initialTab}
			onItemChange={(tab) => setState((prev) => ({ ...prev, initialTab: tab }))}
		>
			<div className="pt-4">
				{state.initialTab === "profile" && <ProfileContent />}
				{state.initialTab === "api-key" && <ApiKeyContent />}
			</div>
		</SettingsDialog>
	);
}