import { Box } from '@mui/system';
import PropType from 'prop-types';
import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

const FeaturedProduct = ({ bColor, image, side }) => {
  return (
    <Box
      sx={{
        width: '100%',
        minHeight: 500,
        backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
        display: 'flex',
      }}
    >
      {side === 'left' ? (
        <ProductImage image={image}></ProductImage>
      ) : (
        <ProductInfo bColor={bColor} side={side}></ProductInfo>
      )}
      {side === 'left' ? (
        <ProductInfo bColor={bColor} side={side}></ProductInfo>
      ) : (
        <ProductImage image={image}></ProductImage>
      )}
    </Box>
  );
};

FeaturedProduct.propTypes = {
  bColor: PropType.string,
  image: PropType.string,
  side: PropType.string,
};
export default FeaturedProduct;