import React from "react";
// import { Image } from "react-bootstrap";
// import { Link } from "react-router-dom";

function RentedBoatTile(props: any) {
    return(
        <div className="rented-boat-tile mb-1 col-sm rounded-2" style={{height: "5rem", minWidth: "17rem", maxWidth: "100%)", margin: "10px"}}>
            <div className="tile-body position-relative w-100 h-100">
                <h3 className="tile-label-boatName position-absolute top-0 start-0 text-white fw-bold">{props.boatName}</h3>
                <h4 className="tile-label-time position-absolute top-0 end-0 text-white">{props.time}</h4>
                <h4 className="tile-label-persons position-absolute bottom-0 start-0 text-white">{props.persons}</h4>
                <h3 className="tile-label-overdue position-absolute bottom-0 end-0 text-white fw-bold">{props.overdue}</h3>
            </div>
        </div>
    );
}

export default RentedBoatTile;