import { Grid, useMediaQuery, useTheme } from "@mui/material";
import wasteimage from "../components/imageandgif/loopwastemanage.png";  // Desktop Image
import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png";  // Mobile Image

const WasteImageSection = () => {
    const theme = useTheme(); // Use the existing theme, don't redeclare it
    const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // For screens < 600px

    return (
        <Grid
            container
            xs={12}
            sx={{
                height: {lg:"660px", xs:'900px'},
                marginTop: { lg: 20, xs: 0 },
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                overflow: "hidden"
            }}
        >
            <img
                src={isMobile ? mobileWasteImage : wasteimage} // Different images for mobile & desktop
                alt="Waste Image"
                style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover"
                }}
            />
        </Grid>
    );
};

export default WasteImageSection;