import { useTranslation } from "react-i18next";
import { FiMoon, FiSun } from "react-icons/fi";
import useTheme from "../../hooks/useTheme";
import RoundButtonBase from "../atoms/RoundButtonBase";
import IconBase from "../molecules/IconBase";

const ThemeButton = () => {
	const [isDark, toggleTheme] = useTheme();
	const { t } = useTranslation();
	return (
		<RoundButtonBase
			buttonProps={{
				className: "swap swap-rotate btn btn-outline btn-circle",
				onClick: toggleTheme,
			}}
			tooltipText={t("button.action.theme")}
		>
			<input checked={isDark} className="hidden" type="checkbox" readOnly />
			<IconBase>
				<div className="swap-on">
					<FiSun />
				</div>
				<div className="swap-off">
					<FiMoon />
				</div>
			</IconBase>
		</RoundButtonBase>
	);
};

export default ThemeButton;