import {Card, FormControlLabel} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
import {paths} from "../../path";
import EditIcon from "@mui/icons-material/Edit";
import React from "react";
import Switch from "@mui/material/Switch";

export function CocktailListCard({row, changeHandler, infoHandler}) {
    return (
        <Card sx={{mb: 1, height: '130px', display: 'relative', pt: 1, borderRadius: '15px'}}>
            <Stack direction='row' justifyContent='start' alignItems='start'>
                <Box sx={{width: '100px', height: '100px', ml: 1}}>
                    <img src={row.image} loading='eager' height={'100px'} width={'100px'} alt={row.id}
                         style={{borderRadius: '20%'}}/>
                </Box>
                <Stack sx={{width: 'calc(95% - 100px)', pr: 2, ml: 1}}>
                    <Box>{row.name}</Box>
                    <FormControlLabel sx={{mt: 5, pr: 2}}
                                      onClick={() => changeHandler(row, !row.inMenu)}
                                      value="bottom"
                                      control={
                                          <Switch color="primary" checked={row.inMenu}/>
                                      }
                                      label="В меню"
                                      labelPlacement="start"
                    />
                </Stack>
                <Stack direction='row'>
                    <Stack sx={{width: '5%', mt: 2}} spacing={1} justifyContent='flex-start'>
                        <IconButton size='small' onClick={() => infoHandler(row)}>
                            <InfoRoundedIcon/>
                        </IconButton>
                        <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
                            <EditIcon/>
                        </IconButton>
                    </Stack>
                </Stack>
            </Stack>
        </Card>
    )
}