Settings 2

import { FieldSeparator } from "@/components/ui/field";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
	ToggleGroup,
	ToggleGroupItem,
} from "@/components/ui/toggle-group";
import { SettingField } from "@/components/settings-field";
import { SettingsSection } from "@/components/settings-section";

const themeOptions = [
	{
		value: "light",
		label: "Light",
		icon: (
			<IconPlaceholder
				aria-hidden
				className="text-muted-foreground"
				hugeicons="Sun01Icon"
				lucide="SunIcon"
				phosphor="SunIcon"
				remixicon="RiSunLine"
				tabler="IconSun"
			/>
		),
	},
	{
		value: "dark",
		label: "Dark",
		icon: (
			<IconPlaceholder
				aria-hidden
				className="text-muted-foreground"
				hugeicons="Moon02Icon"
				lucide="MoonStarIcon"
				phosphor="MoonStarsIcon"
				remixicon="RiMoonLine"
				tabler="IconMoonStars"
			/>
		),
	},
	{
		value: "system",
		label: "System",
		icon: (
			<IconPlaceholder
				aria-hidden
				className="text-muted-foreground"
				hugeicons="ComputerSettingsIcon"
				lucide="MonitorCogIcon"
				phosphor="DesktopIcon"
				remixicon="RiComputerLine"
				tabler="IconDeviceDesktopCog"
			/>
		),
	},
] as const;

const languages = [
	{ value: "en", label: "English" },
	{ value: "de", label: "Deutsch" },
	{ value: "fr", label: "Français" },
	{ value: "ja", label: "日本語" },
] as const;

export function AppearanceSettings() {
	return (
		<SettingsSection
			description="Customize how Efferd looks for you."
			title="Appearance"
		>
			<SettingField
				description="Match your system or pick one."
				htmlFor="theme"
				label="Theme"
			>
				<ToggleGroup
					aria-label="Theme"
					defaultValue="system"
					id="theme"
					type="single"
					variant="outline"
				>
					{themeOptions.map((option) => (
						<ToggleGroupItem key={option.value} value={option.value}>
							<span className="flex items-center gap-1.5">
								{option.icon}
								{option.label}
							</span>
						</ToggleGroupItem>
					))}
				</ToggleGroup>
			</SettingField>
			<FieldSeparator />
			<SettingField
				description="Used across the interface."
				htmlFor="language"
				label="Language"
			>
				<Select defaultValue="en">
					<SelectTrigger id="language">
						<SelectValue />
					</SelectTrigger>
					<SelectContent>
						<SelectGroup>
							<SelectLabel>Languages</SelectLabel>
							{languages.map((language) => (
								<SelectItem key={language.value} value={language.value}>
									{language.label}
								</SelectItem>
							))}
						</SelectGroup>
					</SelectContent>
				</Select>
			</SettingField>
			<FieldSeparator />
			<SettingField
				description="Tighter spacing in tables and lists."
				htmlFor="compact-mode"
				label="Compact mode"
				orientation="horizontal"
			>
				<Switch id="compact-mode" />
			</SettingField>
		</SettingsSection>
	);
}