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 KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import ProductType from '../components/ProductType';
import NewsLetter from '../components/NewsLetter';

import ProductService from "../services/ProductService"

const Home = () => {

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

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

        <Grid container sx={{
          py:{
            xs:3,
            md:3,
            lg:6
          }
        }}>

          {/* OFFSET PURPOSE */}
          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center" }}></Grid>

          <Grid size={{xs:12, md:4}} sx={{mx:"auto", display:"flex", alignItems:"center", justifyContent:"center" }}>
            {/* Icon at the start */}
            <KeyboardArrowLeftIcon sx={{ mr: 3, color: "#B7B7B7" }} />
            <Typography variant="h4">
              NEW IN
            </Typography>
            {/* Icon at the end */}
            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} />
          </Grid>

          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center", py:{xs:2, md:0} }}>
            <Link href="/product" sx={{ color:"#000", textDecoration: "underline", m:{xs:"auto auto auto auto", md:"0 0 0 auto"}}}>VIEW ALL</Link>
          </Grid>

        </Grid>

        <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 />
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType />
            </Grid>
            <Grid size={{xs:12, md:6}}>
              <ProductType />
            </Grid>
            <Grid size={12}>
              <ProductType />
            </Grid>
          </Grid>
        </Box>

      </Box>

      <NewsLetter />

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

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


    </>
  )
}

export default Home