import React from 'react'
import { Box, Typography } from '@mui/material'
import Grid from '@mui/material/Grid2';
import CarouselContainer from '../components/CarouselContainer'
import ProductSelected from '../components/ProductSelected'
import SocialMedia from '../components/SocialMedia'
import Feature from '../components/Feature'
import { Link } from '@mui/material'
import VideoAds from '../components/VideoAds'
import ProductType from '../components/ProductType';
import NewsLetter from '../components/NewsLetter';
import ProductService from "../services/ProductService"
import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
import AmberClothing from "../assets/images/amberClothing.webp"

const Home = () => {

  React.useEffect(()=>{
    ProductService.getProducts();
  },[])

  return (
    <>
      <CarouselContainer />
      <Box sx={{
        px: {
          xs: 2,
          md: 5,
          lg: 5
        }
      }}>

        <ProductSelected />
        
      </Box>

      <VideoAds />

      <Box sx={{
        px: {
          xs: 2,
          md: 5,
          lg: 5
        },
        mb: {
          xs: 2,
          md: 5,
          lg: 10
        }
      }}>

        <Box sx={{ flexGrow: 1, mt: 5 }}>
          <Grid container spacing={2}>
            <Grid size={12}>
              <ProductType title={'Apparel'} img_url={AmberClothing}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType title={'BEAUTY'} img_url={AmberBeautyWallpaper}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType title={'HOME'} img_url={AmberHomeWallpaper} />
            </Grid>
          </Grid>
        </Box>

      </Box>

      <NewsLetter />

      <Box sx={{ px:{
        xs: 2,
        md: 5,
        lg: 5
      }, mb: 10 }}>

        <Feature />
      </Box>


    </>
  )
}

export default Home