import { useRef, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import Breadcrumb from '../components/sections/Breadcrumb'
import ProjectFilterGrid from '../components/sections/ProjectFilterGrid'
import { useNavFix } from '../hooks/useNavFix'

export default function Project() {
  const ref = useRef(null)
  useNavFix(ref)
  const { pathname } = useLocation()

  useEffect(() => { window.scrollTo(0, 0) }, [pathname])

  return (
    <div ref={ref}>
      <Breadcrumb title="Project" items={[{ link: '/', label: 'Home' }, { label: 'Project' }]} />
      <ProjectFilterGrid />
    </div>
  )
}
