"use client"

import { useTheme } from "next-themes"
import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { useEffect, useState } from "react"

export function AppearanceForm() {
    const { theme, setTheme } = useTheme()
    const [mounted, setMounted] = useState(false)

    // Avoid hydration mismatch
    useEffect(() => {
        setMounted(true)
    }, [])

    if (!mounted) {
        return (
            <Card>
                <CardHeader>
                    <CardTitle>Görünüm</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="flex items-center justify-between space-y-2">
                        <Label htmlFor="dark-mode" className="flex flex-col space-y-1">
                            <span>Karanlık Mod</span>
                            <span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
                        </Label>
                        <Switch id="dark-mode" disabled />
                    </div>
                </CardContent>
            </Card>
        )
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle>Görünüm</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="flex items-center justify-between space-y-2">
                    <Label htmlFor="dark-mode" className="flex flex-col space-y-1">
                        <span>Karanlık Mod</span>
                        <span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
                    </Label>
                    <Switch
                        id="dark-mode"
                        checked={theme === 'dark'}
                        onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
                    />
                </div>
            </CardContent>
        </Card>
    )
}