import React from 'react';
import { Box, Button, Typography } from '@mui/material';

const ProductType = ({ title, img_url }) => {
  return (
    <Box
      sx={{
        position: 'relative',
        width: '100%',
        height: 0,
        paddingTop: '700px', // This sets the height based on top padding
        backgroundImage: `url(${img_url})`,
        overflow: 'hidden',
        backgroundSize: 'cover',
        backgroundPosition: 'center center'
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundColor: 'rgba(0, 0, 0, 0.1)', // Filter overlay
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#fff', // Text and button color for visibility
          transition: "all 0.5s ease-in-out",
          ":hover":{
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
          }
        }}
        onClick={() => {
          sessionStorage.setItem('amber-select-product-type', title)
          sessionStorage.removeItem('amber-select-collection')
          window.location.href = '/products'
        }}
      >
        {/* <Typography variant="h5" gutterBottom sx={{ fontWeight: "600", letterSpacing: 7, marginRight:"-0.4em" }}>
          {title?.toUpperCase()}
        </Typography>
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            sessionStorage.setItem('amber-select-product-type', title)
            sessionStorage.removeItem('amber-select-collection')
            window.location.href = '/products'
          }}>
          SHOP NOW
        </Button> */}
      </Box>
    </Box>
  );
};

export default ProductType;
