"use client";

import { useTranslation } from "@/lib/i18n";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import ThemeToggle from "@/components/ui/ThemeToggle";
import LanguageSwitcher from "@/components/ui/LanguageSwitcher";

export default function SettingsPage() {
	const { t } = useTranslation();

	return (
		<PageContainer>
			<PageHeader title={t('settings.title') || 'Settings'} />

			<div className="max-w-2xl mx-auto space-y-6">
				{/* Appearance Settings */}
				<Card>
					<CardHeader>
						<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
							{t('settings.appearance') || 'Appearance'}
						</h2>
					</CardHeader>
					<CardContent className="space-y-4">
						<div className="flex items-center justify-between">
							<div>
								<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
									{t('settings.theme') || 'Theme'}
								</label>
								<p className="text-sm text-gray-500 dark:text-gray-400">
									{t('settings.themeDescription') || 'Choose your preferred theme'}
								</p>
							</div>
							<ThemeToggle />
						</div>
					</CardContent>
				</Card>

				{/* Language Settings */}
				<Card>
					<CardHeader>
						<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
							{t('settings.language') || 'Language'}
						</h2>
					</CardHeader>
					<CardContent className="space-y-4">
						<div className="flex items-center justify-between">
							<div>
								<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
									{t('settings.language') || 'Language'}
								</label>
								<p className="text-sm text-gray-500 dark:text-gray-400">
									{t('settings.languageDescription') || 'Select your preferred language'}
								</p>
							</div>
							<LanguageSwitcher />
						</div>
					</CardContent>
				</Card>
			</div>
		</PageContainer>
	);
}