/**
 * @file Device.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {Button, Card, CardActions, CardContent, Typography} from "@mui/material";
import React from "react";
import {useNavigate} from "react-router-dom";
import DeviceLastData from "./DeviceLastData";

function Device(props) {
    const navigate = useNavigate();
    const dev = props.device;

    return (<>
        {dev !== null ?
            <Card sx={{boxShadow: 3}}>
                <CardContent>
                    <Typography variant={"h6"}>{dev.name}</Typography>
                    <DeviceLastData dev={dev} compact={true} sx={{paddingTop: 1}}/>
                </CardContent>

                <CardActions>
                    <Button size={"small"} onClick={() => navigate(`/devices/${dev.id}`)}>Detail</Button>
                </CardActions>
            </Card>
            :
            <div/> }
    </>);
}


export default Device;
