import React, { useState } from 'react' import Card from '@material-ui/core/Card' import { useStyles } from '../../style/HospitalStyle' import CardContent from '@material-ui/core/CardContent' import Typography from '@material-ui/core/Typography' import Grid from '@material-ui/core/Grid' import Box from '@material-ui/core/Box' import { Link } from '@material-ui/core' import MakersForm from '../makers/MakersForm' import HospitalNeed from './HospitalNeed' const HospitalCard = ({ hospitalNeeds }) => { const classes = useStyles() const [showDialog, setShowDialog] = useState(false) const handleContactClicked = () => { setShowDialog(true) } const handleDialogClosing = () => { setShowDialog(false) } return ( <> <MakersForm open={showDialog} onClose={handleDialogClosing} hospitalNeeds={hospitalNeeds}/> <Grid item key={hospitalNeeds.hospital.name} xs={6} sm={3} md={3} lg={3} xl={3}> <Card className={classes.card} > <CardContent className={classes.cardContent} align="left"> <Box fontWeight="fontWeightBold"> <Typography align="left"> {hospitalNeeds.hospital.name} </Typography> </Box> <HospitalNeed need={{ quantity: hospitalNeeds.quantity, productsName: hospitalNeeds.product.name }}/> <Link onClick={handleContactClicked}>Contact</Link> </CardContent> </Card> </Grid> </> ) } export default HospitalCard