import { Box } from '@mui/system';
import PropType from 'prop-types';
import { useStore, useStoreUpdate } from '../../../store/cart-context';
import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

const FeaturedProduct = ({ product, bColor, image, side }) => {
  const data = { name: product.name, description: product.description };
  const { addCartValue } = useStoreUpdate();
  const { cartStorage } = useStore();
  const addProductToCart = (quantity) => addCartValue(product, quantity);
  const inCart = cartStorage?.some(
    (item) => item.product.customID === product.customID
  )
    ? true
    : false;

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

FeaturedProduct.propTypes = {
  product: PropType.shape({
    category: PropType.string,
    name: PropType.string,
    image: PropType.string,
    description: PropType.string,
    place: PropType.string,
    people: PropType.string,
    process: PropType.string,
    pairing: PropType.string,
    available: PropType.Boolean,
    isFeatured: PropType.Boolean,
    price: PropType.number,
    customID: PropType.string,
  }),
  bColor: PropType.string,
  image: PropType.string,
  side: PropType.string,
};
export default FeaturedProduct;
