"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/hooks/useTheme";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";

export function ThemeToggle({ compact = false, inline = false }: { compact?: boolean; inline?: boolean } = {}) {
  const { resolved, toggle, setTheme } = useTheme();
  const { t } = useTranslation();

  if (inline) {
    return (
      <div className="grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1 dark:bg-slate-800 border border-slate-200/60 dark:border-slate-700/60">
        <button
          type="button"
          onClick={() => setTheme("light")}
          aria-pressed={resolved === "light"}
          className={cn(
            "flex items-center justify-center gap-2 rounded-lg py-1.5 text-xs font-semibold transition-all duration-200",
            resolved === "light"
              ? "bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white"
              : "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
          )}
        >
          <Sun className="h-3.5 w-3.5" />
          <span>{t("theme.light")}</span>
        </button>
        <button
          type="button"
          onClick={() => setTheme("dark")}
          aria-pressed={resolved === "dark"}
          className={cn(
            "flex items-center justify-center gap-2 rounded-lg py-1.5 text-xs font-semibold transition-all duration-200",
            resolved === "dark"
              ? "bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white"
              : "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
          )}
        >
          <Moon className="h-3.5 w-3.5" />
          <span>{t("theme.dark")}</span>
        </button>
      </div>
    );
  }

  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={t("theme.toggle")}
      aria-pressed={resolved === "dark"}
      className={cn(
        "relative inline-flex items-center justify-center rounded-lg text-slate-600 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white",
        compact ? "h-8 w-8" : "h-9 w-9",
      )}
    >
      <Sun
        className={cn(
          "absolute h-4 w-4 transition-all duration-500 ease-snappy",
          resolved === "dark"
            ? "rotate-0 scale-100 opacity-100"
            : "rotate-90 scale-0 opacity-0",
        )}
      />
      <Moon
        className={cn(
          "absolute h-4 w-4 transition-all duration-500 ease-snappy",
          resolved === "dark"
            ? "-rotate-90 scale-0 opacity-0"
            : "rotate-0 scale-100 opacity-100",
        )}
      />
    </button>
  );
}