import { Settings } from "lucide-react";
import { LangToggle } from "~/components/navbar/lang-toggle";
import { Button } from "~/components/ui/button";

import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import { ThemeSwitch } from "./theme-toggle";

export const SettingsPopover = () => {
	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button aria-label="Settings" className="p-2" variant="ghost">
					<Settings />
				</Button>
			</PopoverTrigger>
			<PopoverContent className="flex w-fit justify-center gap-4 p-4">
				<LangToggle />
				<ThemeSwitch />
			</PopoverContent>
		</Popover>
	);
};