import React from "react";
import * as Actions from "../../actionCreators";
import { useActionCreator } from "../../hooks";

const ActionButtons = React.memo(() => {
  const previous = useActionCreator(Actions.previous);
  const play = useActionCreator(Actions.play);
  const pause = useActionCreator(Actions.pause);
  const next = useActionCreator(Actions.next);
  return (
    <div className="actions">
      <div id="previous" onClick={previous} title="Previous Track" />
      <div id="play" onClick={play} title="Play" />
      <div id="pause" onClick={pause} title="Pause" />
      <div id="stop" onClick={stop} title="Stop" />
      <div id="next" onClick={next} title="Next Track" />
    </div>
  );
});

export default ActionButtons;