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

const CategoryList = ({ productType }) => {

  const [categorys, setCategorys] = useState(['all'])

  useEffect(() => {

    ProductService.getTags(productType).then((data) => {
      
      setCategorys([...categorys, ...data])
    })

  }, [])


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

      {categorys.length > 0 && <Typography variant="h4" sx={{ textAlign: "center", mb: 5}}>SHOP BY CATEGORY</Typography>}

      <Box
        display="flex"
        flexWrap="wrap"
        gap={2} // Spacing between buttons
        justifyContent="center" // Center align buttons
        p={2} // Padding inside the container
      >
        {categorys.map((label, index) => (
          <Button 
           sx={{
            py:2,
            px:4,
            
           }}
            onClick={()=>{
              //sessionStorage.removeItem('amber-select-collection')
              sessionStorage.setItem('amber-select-category', label)
              window.location.href = "/products" 
            }}
            key={index} variant="contained" color="primary">
            <Typography variant="body1" sx={{fontWeight:"bold"}}>{label}</Typography>
          </Button>
        ))}
        
      </Box>
    </Box>
  );
};

export default CategoryList;
