frontend/src/components/ThemeToggleButton.tsx

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

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

type ThemeToggleButtonProps = Omit<
    ComponentProps<typeof Button>,
    "onClick" | "children" | "type"
> & {
    showLabel?: boolean;
};

export function ThemeToggleButton({
    className,
    showLabel = false,
    variant = "outline",
    size = "icon-sm",
    ...props
}: ThemeToggleButtonProps) {
    const { currentTheme, setTheme } = useTheme();
    const isDark = currentTheme.name === "dark";

    return (
        <Button
            type="button"
            variant={variant}
            size={size}
            className={className}
            onClick={() => setTheme(isDark ? "light" : "dark")}
            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
            {...props}
        >
            {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
            {showLabel ? (
                <span className="text-xs sm:text-sm">
                    {isDark ? "Light" : "Dark"}
                </span>
            ) : (
                <span className="sr-only">Toggle theme</span>
            )}
        </Button>
    );
}