import { useEffect, useState } from "react";
import { Box, Typography, Button } from "@mui/material";
import ProductService from "../../services/ProductService";
import Grid from '@mui/material/Grid2';

const CollectionList = ({ productType }) => {

  const [collections, setCollections] = useState([])

  useEffect(() => {

    ProductService.getCollections(productType).then((data) => {
      setCollections(data)
    })

  }, [])



  return (
    <Box sx={{ flexGrow: 1, mt: 10 }}>

      { collections.length > 0 && <Typography variant="h4" sx={{textAlign:"center", mb:5}}>COLLECTIONS</Typography>}

      <Grid container spacing={2}>

        {collections.map(({id, name, src}) => {

          return (<Grid size={12}>
            <Box
              sx={{
                position: 'relative',
                width: '100%',
                height: 0,
                backgroundImage: `url("${src}")`,
                backgroundSize: "cover",
                backgroundPosition: "top center",
                paddingTop: '600px', // This sets the height based on top padding
                overflow: 'hidden',
              }}
            >
              <Box
                sx={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: '100%',
                  backgroundColor: 'rgba(0, 0, 0, 0.5)', // Filter overlay
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  color: '#fff', // Text and button color for visibility
                }}
              >
                <Typography variant="h4" gutterBottom>
                  {name}
                </Typography>
                <Button onClick={()=>{ 
                  sessionStorage.removeItem('amber-select-category')
                  sessionStorage.setItem('amber-select-collection', JSON.stringify({id, name, src}))
                  window.location.href = "/products" 
                }} variant="contained" color="primary">
                  SHOP NOW
                </Button>
              </Box>
            </Box>
          </Grid>)
        })}


      </Grid>
    </Box>
  );
};

export default CollectionList;