import { Modal } from '@faceless-ui/modal'
import { HeaderBar } from '.'
import { MainMenu } from '../../payload-types'
import { Gutter } from '../Gutter'
import { CMSLink } from '../Link'

import classes from './mobileMenuModal.module.scss'

type Props = {
  navItems: MainMenu['navItems']
}

export const slug = 'menu-modal'

export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
  return (
    <Modal slug={slug} className={classes.mobileMenuModal}>
      <HeaderBar />

      <Gutter>
        <div className={classes.mobileMenuItems}>
          {navItems.map(({ link }, i) => {
            return <CMSLink className={classes.menuItem} key={i} {...link} />
          })}
        </div>
      </Gutter>
    </Modal>
  )
}