import { Box } from '@mui/system';
import { ProductDataDB } from '../../../utils/interface/productInterface';
import FeaturedProduct from '../featured-product/FeaturedProduct';

interface FeaturedProductListProps {
    featuredProducts: ProductDataDB[];
}

const FeaturedProductsList: React.FC<FeaturedProductListProps> = ({ featuredProducts }) => {
    return (
        <Box
            sx={{
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
            }}
        >
            {featuredProducts.map((product, i) => {
                return (
                    <FeaturedProduct
                        key={i}
                        product={product}
                        bColor={i % 2 === 0 ? 'dark' : 'light'}
                        side={i % 2 === 0 ? 'left' : 'right'}
                    ></FeaturedProduct>
                );
            })}
        </Box>
    );
};

export default FeaturedProductsList;
