import {Card, Button} from 'react-bootstrap';
import {Link, useHistory, useRouteMatch} from 'react-router-dom';
import React from 'react';

const Category = ({id, name, comment, deleteHandler}) => {
    const history = useHistory();
    const match = useRouteMatch();

    const crudButtons = <>
        <Button variant="primary" className="mx-2"
                onClick={() => history.push(`${match.path}/form/${id}`)}>Edit</Button>
        <Button variant="danger" className="mx-2" onClick={deleteHandler}>Delete</Button>
    </>

    const loginButton = <>
        <Link to={"/login"}>Please login to edit or delete the robot.</Link>
    </>

    return (
        <Card className="my-3">
            <Card.Body>
                <Card.Title>{name}</Card.Title>
                <Card.Text>
                    {comment}
                </Card.Text>
                {deleteHandler ? crudButtons : loginButton}
            </Card.Body>
        </Card>
    )
};

export default Category;
