import clsx from "clsx";

import Icon from "@/components/icon";
import { useStore } from "@/store";

import CallToAction, { type CallToActionProps } from "./call-to-action";

import styles from "./styles.module.scss";

const SoundButton = ({ className, ...props }: CallToActionProps) => {
  const isMuted = useStore.use.isMuted();
  const setIsMuted = useStore.use.setIsMuted();

  return (
    <CallToAction
      className={clsx(styles.soundButton, className)}
      variant="buttonPill"
      onClick={(event) => {
        event.preventDefault();
        setIsMuted(!isMuted);
      }}
      ariaLabel={isMuted ? "Mute audio" : "Unmute audio"}
      {...props}
    >
      <span className={styles.iconGroup}>
        <Icon
          id="mute-icon"
          className={clsx(styles.icon, {
            [styles.visible]: isMuted,
          })}
          variant="mute"
        />
        <Icon
          id="unmute-icon"
          className={clsx(styles.icon, {
            [styles.visible]: !isMuted,
          })}
          variant="unmute"
        />
      </span>
      Sound
    </CallToAction>
  );
};

export default SoundButton;