import React from "react";
import styles from "./PlayPause.module.css";
import { ReactComponent as PlayArrow } from "../Icon/play_arrow.svg";
import { ReactComponent as Pause } from "../Icon/pause.svg";

export default ({
  onClick,
  paused,
  className,
  ariaLabelPlay,
  ariaLabelPause
}) => {
  return (
    <div className={[styles.component, className].join(" ")}>
      <button
        className={styles.button}
        onClick={onClick}
        aria-label={paused ? ariaLabelPlay : ariaLabelPause}
        type="button"
      >
        {paused ? (
          <PlayArrow className={styles.icon} fill="#fff" />
        ) : (
          <Pause className={styles.icon} fill="#fff" />
        )}
      </button>
    </div>
  );
};