import { useState } from "react";
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 PlayButton = ({ className, ...props }: CallToActionProps) => {
  const isMuted = useStore.use.isMuted();
  const setIsMuted = useStore.use.setIsMuted();
  return (
    <CallToAction
      className={clsx(styles.playButton, className)}
      variant="playButton"
      tabIndex={props.tabIndex}
      onClick={(event) => {
        event.preventDefault();
        setIsMuted(!isMuted);
      }}
      ariaLabel={isMuted ? "Paused audio" : "Playing audio"}
      {...props}
    >
      <span className={styles.iconGroup}>
        <Icon
          id="pause-icon"
          className={clsx(styles.icon, styles.iconPause, {
            [styles.visible]: !isMuted,
          })}
          variant="pause"
        />
        <Icon
          id="play-icon"
          className={clsx(styles.icon, styles.iconPlay, {
            [styles.visible]: isMuted,
          })}
          variant="play"
        />
      </span>
    </CallToAction>
  );
};

export default PlayButton;