import React from 'react'

import { useMediaQuery } from '../../hooks/responsiveHooks'
import { type BreadcrumbsProps } from './Common/BreadcrumbTypes'
import DesktopBreadcrumbs from './DesktopBreadcrumbs/DesktopBreadcrumbs'
import MobileBreadcrumbs from './MobileBreadcrumbs/MobileBreadcrumbs'

const Breadcrumbs = (props: BreadcrumbsProps): React.JSX.Element => {
  const isMobileView = useMediaQuery({ type: 'max', breakpoint: 'md' })

  return isMobileView ? (
    <MobileBreadcrumbs {...props} />
  ) : (
    <DesktopBreadcrumbs {...props} />
  )
}

export default Breadcrumbs