import { useEffect } from 'react'
import { useParams } from 'react-router-dom'
import PageTitle from '../components/PageTitle'
import Filter from '../components/Filter'
import ProductList from '../components/ProductList'
import { Box } from '@mui/material'
import SocialMedia from '../components/SocialMedia'
import Feature from '../components/Feature'
import { useSelector, useDispatch } from 'react-redux'
import { fetchProducts } from '../redux/slices/productSlice'
import image from "../assets/images/titleBg.jpg"
import CategoryList from '../components/CategoryList'
import CollectionList from '../components/CollectionList/CollectionList'

const Collection = () => {

  let { pid } = useParams();

  return (
    <>
      <PageTitle title={`AMBER ${pid}`} image={image} />
      <CategoryList productType={pid}/>
      <CollectionList productType={pid}/>
      <Box sx={{
        px: {
          xs: 2,
          md: 5,
          lg: 5
        },
        mb: {
          xs: 0,
          md: 5,
          lg: 10
        }
      }}>
      </Box>
      <SocialMedia />
      <Feature />
    </>
  )
}

export default Collection