auto-trade/components/theme-toggle.tsx

/**
 * @file components/theme-toggle.tsx
 * @description 라이트/다크 테마 즉시 전환 토글 버튼
 * @remarks
 * - [레이어] Components/UI
 * - [사용자 행동] 버튼 클릭 -> 라이트/다크 즉시 전환
 * - [연관 파일] theme-provider.tsx (next-themes)
 */

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { cn } from "@/lib/utils";

import { Button } from "@/components/ui/button";

interface ThemeToggleProps {
  className?: string;
  iconClassName?: string;
}

/**
 * 테마 토글 컴포넌트
 * @remarks next-themes의 useTheme 훅 사용
 * @returns 단일 클릭으로 라이트/다크를 전환하는 버튼
 * @see features/layout/components/header.tsx Header 액션 영역 - 사용자 테마 전환 버튼
 */
export function ThemeToggle({ className, iconClassName }: ThemeToggleProps) {
  const { resolvedTheme, setTheme } = useTheme();

  const handleToggleTheme = React.useCallback(() => {
    // 시스템 테마 사용 중에도 현재 화면 기준으로 명확히 라이트/다크를 토글합니다.
    setTheme(resolvedTheme === "dark" ? "light" : "dark");
  }, [resolvedTheme, setTheme]);

  return (
    <Button
      type="button"
      variant="ghost"
      size="icon"
      className={className}
      onClick={handleToggleTheme}
      aria-label="테마 전환"
    >
      {/* ========== LIGHT ICON ========== */}
      <Sun
        className={cn(
          "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",
          iconClassName,
        )}
      />
      {/* ========== DARK ICON ========== */}
      <Moon
        className={cn(
          "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100",
          iconClassName,
        )}
      />
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}