import { useStyleConfig, vui } from '../core'
import List from '../list'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderMainLinksProps } from './header.types'
import HeaderLinkItem from './headerLinkItem'

/** List of Header Links. */
export const HeaderMainLinks = vui<'ul', HeaderMainLinksProps>((props, ref) => {
  const { children, className, links, ...rest } = props
  const { isMobile } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext())

  const screenStyles = isMobile
    ? {
        flexDirection: 'column',
        mb: 1,
      }
    : { h: '100%' }

  return (
    <List
      className={cs('vui-headerMainLinks', className)}
      display="flex"
      ref={ref}
      {...styles.mainLinks}
      {...screenStyles}
      {...rest}
    >
      {children ?? links?.map((link, index) => <HeaderLinkItem key={index} {...link} />)}
    </List>
  )
})

HeaderMainLinks.displayName = 'HeaderMainLinks'

export default HeaderMainLinks
