import React, { useEffect } from 'react'
import { Box, Typography } from '@mui/material';
import { useParams } from 'react-router-dom';
import Grid from '@mui/material/Grid2';
import logoSrc from "../../assets/svg/logo.svg";
import ImageView from '../../components/ImageView/ImageView';
import ProductDetails from '../../components/ProductDetails';
import ProductSuggestion from '../../components/ProductSuggestion';
import ProductHistoryList from '../../components/ProductHistoryList';
import SocialMedia from '../../components/SocialMedia'
import Feature from '../../components/Feature'

const Product = () => {

  let { pid } = useParams();

  useEffect(() => {

  }, [])

  return (

    <Box sx={{
      px: {
        xs: 2,
        md: 12,
        lg: 20
      },
      mb: {
        xs: 0,
        md: 5,
        lg: 10
      }
    }}>
      <Grid container spacing={0} sx={{ mt: 10, mb:5 }}>

        <Grid size={12} sx={{ backgroundColor: "#000", textAlign:"center", display:{xs:"block", md:"none"} }}>
          <img src={logoSrc} alt="Logo"
            style={{
              width: 150,
              height: 50
            }} />
        </Grid>

        <Grid size={{ xs: 12, md: 6 }}>
          <Box sx={{ paddingRight: 1 }}>
            <Box>
              <ImageView />
            </Box>
          </Box>
        </Grid>

        <Grid size={{ xs: 12, md: 6 }}>
          <Box>
            <Box>
              <ProductDetails />
            </Box>
          </Box>
        </Grid>
      </Grid>

      <Box sx={{
        width: "100%",
        borderTop: "1px solid rgba(0,0,0,0.2)",
        py: 4,
        textAlign: "center"
      }}>
        <Typography variant='body1' sx={{ fontWeight: "400", mb: 4 }}>
          YOU MAY ALSO LIKE
        </Typography>

        <ProductSuggestion />

      </Box>

      <Box sx={{
        width: "100%",
        borderTop: "1px solid rgba(0,0,0,0.2)",
        py: 4,
        textAlign: "center"
      }}>
        <Typography variant='body1' sx={{ fontWeight: "400", mb: 4 }}>
          RECENTLY VIEWED
        </Typography>

        <ProductHistoryList />

      </Box>


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

  )
}

export default Product