import { Typography } from "antd";
import { toggleTheme } from "features/theme/themeSlice";
import { useAppDispatch, useAppSelector } from "redux/hooks";

const { Text } = Typography;

export function ThemeSwitch() {
  const dispatch = useAppDispatch();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { themeName } = useAppSelector((state) => state.theme);

  const changeTheme = () => {
    dispatch(toggleTheme());
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: isRTL ? "row-reverse" : "row",
        justifyContent: "center",
        gap: 10,
        marginTop: 20,
        position: "absolute",
        top: "10%",
        [isRTL ? "left" : "right"]: "5%",
      }}
    >
      <Text
        onClick={() => {
          changeTheme();
        }}
      >
        {themeName === "dark" ? "☀️" : "🌙"}
      </Text>
    </div>
  );
}
