"use client"
import { Monitor, Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Label } from "@/shared/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"

type ThemeChoice = "system" | "light" | "dark"

export function ThemePreferencesCard() {
  const { theme, setTheme } = useTheme()

  const value: ThemeChoice = theme === "light" || theme === "dark" || theme === "system" ? theme : "system"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Theme</CardTitle>
        <CardDescription>Choose how the admin console looks on this device.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-3 sm:max-w-md">
        <div className="space-y-2">
          <Label htmlFor="theme">Color theme</Label>
          <Select value={value} onValueChange={(v) => setTheme(v)}>
            <SelectTrigger id="theme" suppressHydrationWarning>
              <SelectValue placeholder="Select theme" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="system">
                <div className="flex items-center gap-2">
                  <Monitor className="h-4 w-4 text-muted-foreground" />
                  System
                </div>
              </SelectItem>
              <SelectItem value="light">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  Light
                </div>
              </SelectItem>
              <SelectItem value="dark">
                <div className="flex items-center gap-2">
                  <Moon className="h-4 w-4 text-muted-foreground" />
                  Dark
                </div>
              </SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardContent>
    </Card>
  )
}