import React from "react";
import PhotoLibraryIcon from "@material-ui/icons/PhotoLibrary";
import { Typography } from "@material-ui/core";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import { setCurrentAlbum } from "../actions";

function Album({ id, data }) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleAlbumClick = () => {
    dispatch(setCurrentAlbum({ albumId: id, albumName: data.name }));
    navigate(`/album/${data.name}`);
  };

  return (
    <div className="homepage__photoAlbum" onClick={handleAlbumClick}>
      <PhotoLibraryIcon fontSize="large" />
      <Typography variant="h6">{data.name}</Typography>
    </div>
  );
}

export default Album;