import React, { useState } from "react";
import { useTheme } from "next-themes";
import { Switch } from "@headlessui/react";

export const ThemeSwitch = () => {
    const { theme, setTheme } = useTheme();
    const [enabled, setEnabled] = useState(true);

    // Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and following translates that to a string.
    if (enabled) {
        setTheme("dark");
    } else {
        setTheme("light");
    }

    return (
        <div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
            <Switch.Group>
                <div className="flex items-center">
                    <Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
                    <Switch
                        checked={enabled}
                        onChange={setEnabled}
                        className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
                    >
                        <span
                            className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
                    </Switch>
                </div>
            </Switch.Group>
        </div>
    );
};