ManagedBoatTile.tsx

import React from "react";
import { Button, Col } from "react-bootstrap";
import { useTranslation } from "react-i18next";
// import { Image } from "react-bootstrap";
// import { Link } from "react-router-dom";

function ManagedBoatTile(props: any) {
	const {t} = useTranslation();
    return(
        <Col>
            <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.blocked ? 'bg-dark' : 'bg-green'}` } style={{height : "80px"}}>
                <div className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-white fw-bold">{props.boatName}</div>
                <div className="tile-label-time position-absolute me-2 mt-2 top-0 end-0 text-white">{props.lastUsed}</div>
                <Button variant="light" className="mb-2 ms-2 bottom-0 start-0 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("managedBoatTile.buttonInfo")}</Button>
                <Button variant="light" className={`mb-2 me-2 bottom-0 end-0 shadow-sm ${props.blocked ? 'bg-green' : 'bg-danger'} border w-50 text-uppercase rounded-pill`}>{props.blocked ? t("managedBoatTile.buttonUnblock") : t("managedBoatTile.buttonUBlock")}</Button>
            </div>
        </Col>
        
    );
}

export default ManagedBoatTile;