import React from 'react'
import { Box, Typography } from '@mui/material'
import Grid from '@mui/material/Grid2';
import Carousel from '../components/Carousel'
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/titleBg.jpg";
import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.jpg";
import AmberClothing from "../assets/images/amberClothing.jpg"

const Home = () => {

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

  return (
    <>
      <Carousel />
      <Box sx={{
        px: {
          xs: 2,
          md: 12,
          lg: 20
        },
        mb: {
          xs: 0,
          md: 5,
          lg: 10
        }
      }}>

        <ProductSelected />
        
      </Box>

      <VideoAds width={"100%"} height={{
        xs: 350,
        md: 500,
        lg: 750,
      }} />

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

        <Box sx={{ flexGrow: 1, mt: 10 }}>
          <Grid container spacing={2}>
            <Grid size={12}>
              <ProductType title={'CLOTHING'} link={'/collection/clothing'} img_url={AmberClothing}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType title={'BEAUTY'} link={'/collection/beauty'} img_url={AmberBeautyWallpaper}/>
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType title={'HOME'} link={'/collection/home'} img_url={AmberHomeWallpaper} />
            </Grid>
          </Grid>
        </Box>

      </Box>

      <NewsLetter />

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

        <SocialMedia />
        <Feature />
      </Box>


    </>
  )
}

export default Home