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

type EducationInfoProps = {
    title: string;
}

export const ProperyInfoCards = () => {
    return(
        <Stack direction={{sm:'row'}} justifyContent={{ sm: 'space-between' }} gap={3.75}>
            <PropertyInfo title={'1968 Greensboro Dr'} />


        </Stack>
    )
}

const PropertyInfo = ({ title }: EducationInfoProps): 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="p" minWidth={100} color="text.primary">
                        {title}
                    </Typography>
                    
                </Stack>
                <Stack direction="column" justifyContent="space-between" flexWrap="wrap">
                <Typography>
                    Estimated Home Value: <b>$700,500k</b>
                </Typography>
                <Typography>
                    Estimated Savings: $24,000k
                </Typography>
                <Typography>
                    Compariable Time on market: 5 days
                </Typography>
                <Typography>
                    Compariable asking vs selling price: +$10k
                </Typography>
                </Stack>



              </CardContent>

        
    </Card>
    )

}

export default PropertyInfo;