coffee-ts/components/products/featured-product/FeaturedProduct.tsx

import { Container } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery';
import { Box } from '@mui/system';
import { useEffect, useState } from 'react';
import { useStore, useStoreUpdate } from '../../../store/cart-context';
import { ProductDataDB } from '../../../utils/interface/productInterface';
import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

interface FeaturedProductProps {
    side: string;
    bColor: string;
    product: ProductDataDB;
}

const FeaturedProduct: React.FC<FeaturedProductProps> = ({ product, bColor, side }) => {
    const matches = useMediaQuery('(min-width: 900px)');
    const data = { name: product.name, description: product.description };
    const { addCartValue } = useStoreUpdate();
    const { cartStorage } = useStore();
    const addProductToCart = (quantity: number) => addCartValue(product, quantity);
    const [inCart, setInCart] = useState(false);

    useEffect(() => {
        if (cartStorage) {
            if (
                cartStorage?.some((item: FeaturedProductProps) => item.product.customID === product.customID)
            )
                setInCart(true);
        }
    }, [cartStorage, product.customID]);

    return (
        <Box
            sx={{
                width: '100%',
                backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
                display: 'flex',
                flexDirection: { xs: 'column', md: 'row' },
                padding: '30px 0 30px 0',
                alignItems: { md: 'center' },
            }}
        >
            <Container
                maxWidth="xl"
                sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
            >
                {side === 'left' ? (
                    <ProductImage image={product.image}></ProductImage>
                ) : !matches ? (
                    <ProductImage image={product.image}></ProductImage>
                ) : (
                    <ProductInfo
                        bColor={bColor}
                        data={data}
                        addProductToCart={addProductToCart}
                        inCart={inCart}
                    ></ProductInfo>
                )}
                {side === 'left' ? (
                    <ProductInfo
                        bColor={bColor}
                        data={data}
                        addProductToCart={addProductToCart}
                        inCart={inCart}
                    ></ProductInfo>
                ) : !matches ? (
                    <ProductInfo
                        bColor={bColor}
                        data={data}
                        addProductToCart={addProductToCart}
                        inCart={inCart}
                    ></ProductInfo>
                ) : (
                    <ProductImage image={product.image}></ProductImage>
                )}
            </Container>
        </Box>
    );
};

export default FeaturedProduct;