import { ReactElement } from 'react';
import { drawerWidth } from 'layouts/main-layout';
import Grid from '@mui/material/Unstable_Grid2';
import PropertyDetailsCard from 'components/sections/dashboard/Home/Property/PropertyDetailsCard';
import HomePriceEstimate from 'components/sections/dashboard/Home/Property/HomePriceEstimate';
import PhotoGalleryCard from 'components/sections/dashboard/Home/Property/PhotoGalleryCard';
import MarketStatistics from 'components/sections/dashboard/Home/Property/MarketStatistics';
import PropertyListingCard from 'components/sections/dashboard/Home/Property/PropertyListingCard';
import LoanDetailsCard from 'components/sections/dashboard/Home/Property/LoanDetailsCard';
import PropertyValueGraphCard from 'components/sections/dashboard/Home/Property/PropertyValueGraphCard';

const Property = (): ReactElement => {
    return(
        <Grid
      container
      component="main"
      columns={12}
      spacing={3.75}
      flexGrow={1}
      pt={4.375}
      pr={1.875}
      pb={0}
      sx={{
        width: { md: `calc(100% - ${drawerWidth}px)` },
        pl: { xs: 3.75, lg: 0 },
      }}
    >
        <Grid xs={12} md={8}>
            <PropertyDetailsCard />

        </Grid>
        <Grid xs={12} md={4}>
            <HomePriceEstimate />
            
        </Grid>
        <Grid xs={12} md={8}>
            <PhotoGalleryCard />

        </Grid>
        <Grid xs={12} md={4}>
            <MarketStatistics />
            
        </Grid>
        <Grid xs={12} md={8}>
            <PropertyValueGraphCard />
            
        </Grid>
        <Grid xs={12} md={4}>
            <LoanDetailsCard />
            
        </Grid>
        <Grid xs={12} md={4}>
            <PropertyListingCard />
            
        </Grid>
        </Grid>
    )
}

export default Property;