import PropTypes from 'prop-types';
import styles from './audio.module.css';

function Audio(props) {
  return (
    <figure className={styles['audio-container']}>
      {props.caption && (
        <figcaption className={`text-bold ${styles.caption}`}>{props.caption}</figcaption>
      )}
      <audio controls src={props.src}>
        Your browser does not support the
        <code>audio</code> element.
      </audio>
    </figure>
  );
}

Audio.propTypes = {
  src: PropTypes.string.isRequired,
  caption: PropTypes.string
};

export default Audio;
