"use client";

import { IconMoon, IconSun } from "@tabler/icons-react";
import classNames from "classnames";
import {
    ActionIcon,
    useComputedColorScheme,
    useMantineColorScheme,
} from "@mantine/core";
import style from "./ActionToggle.module.css";

export function ColorSchemeToggle() {
    const { setColorScheme } = useMantineColorScheme();
    const computedColorScheme = useComputedColorScheme("light", {
        getInitialValueInEffect: true,
    });

    const toggleColorScheme = () => {
        setColorScheme(computedColorScheme === "light" ? "dark" : "light");
    };

    return (
        <ActionIcon
            onClick={toggleColorScheme}
            variant="default"
            size="xl"
            radius="lg"
            aria-label="Toggle color scheme"
            className={style.container}>
            <IconSun
                className={classNames(style.icon, style.light)}
                stroke={1.5}
            />
            <IconMoon
                className={classNames(style.icon, style.dark)}
                stroke={1.5}
            />
        </ActionIcon>
    );
}