import { ReactElement } from 'react';
import { Card, CardContent, CardMedia, Divider, Stack, Typography } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';

const PropertyDetailsCard = (): ReactElement => {
    return(
        <Card
      sx={(theme) => ({
        boxShadow: theme.shadows[4],
        width: 1,
        height: 'auto',
      })}
    >
        <CardContent
                sx={{
                  flex: '1 1 auto',
                  padding: 0,
                  ':last-child': {
                    paddingBottom: 0,
                  },
                }}
              >
                <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap">
                    <Typography variant="subtitle1" component="h3" minWidth={100} color="text.primary">
                        Property Details
                    </Typography>
                    
                </Stack>
                <Grid
                container
                >
                    <Grid xs={6}>
                        <Typography>
                            Property Type: Single Family Home
                        </Typography>
                        
                    </Grid>
                    <Grid xs={6}>
                        <Typography>
                            Year Built: 1998
                        </Typography>
                    </Grid>

                    <Grid xs={6}>
                        <Typography>
                            Lot Size: 0.25 acres
                        </Typography>
                        
                    </Grid>
                    <Grid xs={6}>
                        <Typography>
                            Bedrooms: 3
                        </Typography>
                    </Grid>

                    <Grid xs={6}>
                        <Typography>
                            Bathrooms: 2
                        </Typography>
                        
                    </Grid>
                    <Grid xs={6}>
                        <Typography>
                            Square Feet: 1,850
                        </Typography>
                    </Grid>
                </Grid>
                <Divider />
                <Typography>
                    Beautifully maintained home in desirable neighborhood. Features updated kitchen with granite countertops, hardwood floors throughout main living areas, spacious master suite, and large backyard with deck. Excellent schools nearby.
                </Typography>
              </CardContent>

        
    </Card>
    )

}

export default PropertyDetailsCard;