"use client";

import { Monitor, Moon, Sun } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { useThemeStore, type ColorMode } from "@/stores/theme";

const modeOptions: { value: ColorMode; label: string; icon: React.ElementType }[] = [
  { value: "light", label: "Light", icon: Sun },
  { value: "dark", label: "Dark", icon: Moon },
  { value: "system", label: "System", icon: Monitor },
];

export function ThemePicker() {
  const { mode, setMode } = useThemeStore();

  return (
    <Card>
      <CardHeader>
        <CardTitle>Appearance</CardTitle>
        <CardDescription>Choose a color mode for the app.</CardDescription>
      </CardHeader>
      <CardContent>
        <div>
          <p className="text-sm font-medium mb-3">Mode</p>
          <div className="inline-flex items-center rounded-lg border bg-muted p-1 gap-1">
            {modeOptions.map((opt) => (
              <Button
                key={opt.value}
                type="button"
                variant={mode === opt.value ? "default" : "ghost"}
                size="sm"
                onClick={() => setMode(opt.value)}
                className="gap-1.5"
              >
                <opt.icon className="size-4" />
                {opt.label}
              </Button>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
