
import { ReactElement } from 'react';
import { Button, Card, CardActions, CardContent, CardMedia, Stack, Typography } from '@mui/material';
import { PropertiesAPI } from 'types';
import { Navigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

type EducationInfoProps = {
    property: PropertiesAPI;
}

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


        </Stack>
    )
}

const PropertyInfo = ({ property }: EducationInfoProps): ReactElement => {
    const navigate = useNavigate();  
    const estimated_savings = Number(property.market_value) * 0.06 - 6000
    return(
        <Card
      sx={(theme) => ({
        boxShadow: theme.shadows[4],
        width: 1,
        height: 'auto',
      })}
    >
        <CardMedia
        sx={{ height: 140 }}
        image="https://saterdesign.com/cdn/shop/files/9024-Main-Image.jpg"
        title="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {property.address}
        </Typography>
        <Typography gutterBottom variant="h5" component="div">
          ${property.market_value}
        </Typography>
        <Stack direction='row'>
            <Typography variant='caption'>
                3 bd | 2 ba | 1,860 sqtf
            </Typography>
            <Typography variant='caption'>
                Listed 14 days ago
            </Typography>

        </Stack>
        
        
      </CardContent>

      <CardActions>
        <Button size="small"  
                            variant="contained"
                            component="label"
                            onClick={() => navigate('/property')}>View</Button>
      </CardActions>
        {/* <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">
                        {property.address}
                    </Typography>
                    
                </Stack>
                <Stack direction="column" justifyContent="space-between" flexWrap="wrap">
                <Typography>
                    Estimated Home Value: <b>${property.market_value}</b>
                </Typography>
                <Typography>
                    Estimated Savings: ${estimated_savings}
                </Typography>
                <Typography>
                    Compariable Time on market: 5 days
                </Typography>
                <Typography>
                    Compariable asking vs selling price: +$10k
                </Typography>
                </Stack>



              </CardContent> */}

        
    </Card>
    )

}

export default PropertyInfo;