import React from "react";
import { useMediaQuery, useTheme, Grid } from "@mui/material";
import wasteimage from "../components/imageandgif/Loop Transforming waste.svg"; 
import { ReactComponent as MobileWasteImage } from "../components/imageandgif/Soil & Water Contamination.svg";

const WasteImageSection = () => {
    const theme = useTheme(); 
    const isMobile = useMediaQuery(theme.breakpoints.down("md"));

    return (
        <Grid
            container
            xs={12}
            sx={{
                height: { lg: "820px", xs: "900px", md: "900px" },
                marginTop: { lg: 20, xs: 0 },
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                overflow: "hidden",
                background:'#fafafa'
            }}
        >
            {isMobile ? (
                <MobileWasteImage
                    style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "contain"
                    }}
                />
            ) : (
                <img
                    src={wasteimage}
                    alt="Waste Image"
                    style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "contain"
                    }}
                />
            )}
        </Grid>
    );
};

export default WasteImageSection;