import React from 'react'
import { Box, Typography } from '@mui/material'
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 KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';

const Home = () => {

  return (
    <>
      <Carousel />
      <Box sx={{ px: 24, mb: 10 }}>

        <Box sx={{
          display: "flex",
          position: "relative",
          py: 5
        }}>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              mx: "auto"
            }}
          >
            <KeyboardArrowLeftIcon sx={{ mr: 3, color: "#B7B7B7" }} /> {/* Icon at the start */}
            <Typography variant="h4" sx={{ mx: "auto" }}>
              NEW IN
            </Typography>
            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} /> {/* Icon at the end */}
          </Box>

          <Link href="#" sx={{ position: "absolute", right: 0, textDecoration: "underline" }}>VIEW ALL</Link>

        </Box>

        <ProductSelected />
        <SocialMedia />
        <Feature />
      </Box>
    </>
  )
}

export default Home