'use client'

import React from 'react'
import { cn } from '../../../../utils'
import { CollapseContext } from '../context'
import { MenuButton } from '../icons'
import styles from '../styles.module.css'

export function MobileMenuButton({ className }: { className?: string }) {
  const { expand } = React.useContext(CollapseContext)

  return (
    <button
      onClick={expand}
      className={cn(
        styles.menuButton,
        'flex h-10 w-10 items-center justify-center md:hidden',
        className,
      )}
    >
      <MenuButton />
    </button>
  )
}