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

const ProductType = () => {
  return (
    <Box
      sx={{
        position: 'relative',
        width: '100%',
        height: 0,
        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>
          Some Type
        </Typography>
        <Button variant="contained" color="primary">
          SHOP NOW
        </Button>
      </Box>
    </Box>
  );
};

export default ProductType;
