import Link from 'next/link'
import { ReactFragment } from 'react'
import { NavItem } from '@lib/ghost'

/**
 * Navigation component
 *
 * The Navigation component takes an array of your Ghost
 * navigation property that is fetched from the settings.
 * It differentiates between absolute (external) and relative link (internal).
 * You can pass it a custom class for your own styles, but it will always fallback
 * to a `site-nav-item` class.
 *
 */

interface NavigationProps {
  data?: NavItem[]
  navClass?: string
}

export const Navigation = ({ data, navClass }: NavigationProps) => {
  const items: ReactFragment[] = []

  data?.map((navItem, i) => {
    if (navItem.url.match(/^\s?http(s?)/gi)) {
      items.push(
        <li key={i} className={`nav-${navItem.label.toLowerCase()}`} role="menuitem">
          <a className={navClass} href={navItem.url} target="_blank" rel="noopener noreferrer">
            {navItem.label}
          </a>
        </li>
      )
    } else {
      items.push(
        <li key={i} className={`nav-${navItem.label.toLowerCase()}`} role="menuitem">
          <div className={navClass}>
            <Link href={navItem.url} >
              <a>{navItem.label}</a>
            </Link>
          </div>
        </li>
      )
    }
  })

  return (
    <ul className="nav" role="menu">
      {items}
    </ul>
  )
}