/**
 * @file PublicPreset.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";

function PublicPreset(props) {
    const navigate = useNavigate();
    const preset = props.preset;

    return (<>
        {preset !== null ?
            <Card sx={{boxShadow: 3}}>
                <CardContent sx={{height: 150}}>
                    <Typography noWrap variant={"h6"}>{preset.name}</Typography>
                    <Typography noWrap variant={"subtitle2"}>{preset?.owner?.name}</Typography>
                    {/* Max Lines solution from https://stackoverflow.com/a/68567180 */}
                    <Typography sx={{ mb: 1.5,
                                    display: '-webkit-box',
                                    overflow: 'hidden',
                                    WebkitBoxOrient: 'vertical',
                                    WebkitLineClamp: 3 }}
                                color="text.secondary">
                        {preset.shortDescription}
                    </Typography>
                </CardContent>

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


export default PublicPreset;
