"use client";

import { Sun, Moon, Monitor } from "lucide-react";
import { useTheme, type ColorMode } from "@/lib/themes/use-theme";
import { cn } from "@/lib/utils";

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 },
];

/**
 * Theme switcher component.
 *
 * Light/dark/system segmented toggle.
 */
export function ThemeSwitcher({ className }: { className?: string }) {
  const { mode, setMode } = useTheme();

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      {/* Color mode toggle */}
      <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
        {modeOptions.map(({ value, label, icon: Icon }) => (
          <button
            key={value}
            type="button"
            onClick={() => setMode(value)}
            className={cn(
              "flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
              mode === value
                ? "bg-background text-foreground shadow-sm"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            <Icon className="h-4 w-4" />
            <span className="hidden sm:inline">{label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
