'use client'

// Third-party Imports
import classnames from 'classnames'

// Component Imports
import NavToggle from './NavToggle'
import ModeDropdown from '@components/layout/shared/ModeDropdown'
import UserDropdown from '@components/layout/shared/UserDropdown'

// Util Imports
import { horizontalLayoutClasses } from '@layouts/utils/layoutClasses'
import LanguageDropdown from '../shared/LanguageDropdown'
import { useClearCache } from '@/hooks'
import Button from '@/@core/components/mui/Button'

const NavbarContent = () => {
  // Hooks

  const { mutate, isPending } = useClearCache()

  return (
    <div
      className={classnames(horizontalLayoutClasses.navbarContent, 'flex items-center justify-between gap-4 is-full')}
    >
      <div className='flex items-center gap-4'>
        <NavToggle />
        {/* Hide Logo on Smaller screens */}
        {/*         {!isBreakpointReached && <Logo />}
         */}{' '}
      </div>
      <div className='flex items-center gap-4'>
        {/* <Button onClick={mutate} disabled={isPending} isLoading={isPending} variant='outlined'>
          Clear Cache
        </Button> */}
        <ModeDropdown />
        <LanguageDropdown />
        {/* <NotificationDropdown notifications={[]} /> */}
        <UserDropdown />
      </div>
    </div>
  )
}

export default NavbarContent
