import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import classes from './PlayButton.module.scss';

interface IPlayButtonProps {
  isPlaying: boolean;
  onClick: () => void;
}

function PlayButton(props: IPlayButtonProps) {
  const { isPlaying, onClick } = props;

  return (
    <View
      className={cs(classes['play-button'], {
        [classes['play-button--playing']]: isPlaying,
      })}
      onClick={onClick}
      role="button"
      tabIndex={0}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path
          d={isPlaying ? 'M8 5v14h2V5H8zm6 0v14h2V5h-2z' : 'M8 5v14l11-7z'}
          fill="currentColor"
        />
      </svg>
    </View>
  );
}

export default PlayButton;