import { Card } from "react-bootstrap";
import { useNavigate } from "react-router";
import type Library from "~/Models/Library";

interface Props {
  library: Library;
}

const LibraryCard = ({ library }: Props) => {
  const navigate = useNavigate();

  function handleClick() {
    navigate(`/Library/${library.id}`);
  }

  return (
    <Card onClick={handleClick}>
      <Card.Header>
        <Card.Img />
      </Card.Header>
      <Card.Body>
        <Card.Title>{library.name}</Card.Title>
      </Card.Body>
    </Card>
  );
}

export default LibraryCard;