"use client";

import { useTheme } from "@/lib/theme";
import { SunIcon, MoonIcon, MonitorIcon } from "./icons";

const LABELS = {
  light: "حالت روشن",
  dark: "حالت تاریک",
  system: "حالت سیستم",
};

const ICONS = {
  light: SunIcon,
  dark: MoonIcon,
  system: MonitorIcon,
};

export function ThemeToggle({ className }: { className?: string }) {
  const { theme, toggle } = useTheme();
  const Icon = ICONS[theme];

  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={LABELS[theme]}
      title={LABELS[theme]}
      className={`rounded-lg p-2 text-muted transition hover:bg-surface-muted hover:text-foreground ${className ?? ""}`}
    >
      <Icon className="h-5 w-5" />
    </button>
  );
}