import { type ComponentType } from 'react'
import {
  SvgCompute,
  SvgGraphBarIncrease,
  type SvgIcon,
  SvgCrossChain,
  SvgWrench,
  SvgCoinsStack,
  SvgFileCode1,
} from '@chainlink/blocks-icons'
import { CreIcon } from './CreIcon'
import { Chainlink } from './icons'

type BaseNavEntry = {
  label: string
  Icon?: ComponentType<SvgIcon>
}
export type NavItemAction = BaseNavEntry & { onClick: (item: NavItem) => void }
export type NavItemAnchor = BaseNavEntry & { url: string }
export type NavItem = NavItemAction | NavItemAnchor

export type NavParent = BaseNavEntry & { items: NavEntry[] }
export type NavEntry = NavItem | NavParent

export type NavConfig = NavEntry[]

export const chainlinkLogo: NavItemAnchor = {
  label: '',
  Icon: Chainlink,
  url: '/',
}

export const config: NavConfig = [
  { label: 'CRE', Icon: CreIcon, url: 'https://cre.chain.link' },
  {
    label: 'Data',
    Icon: SvgGraphBarIncrease,
    items: [
      { label: 'Data Feeds', url: 'https://data.chain.link/feeds' },
      { label: 'Data Streams', url: 'https://data.chain.link/streams' },
      { label: 'Smart Data', url: 'https://data.chain.link/smartdata' },
      { label: 'DataLink', url: 'https://data.chain.link/datalink' },
      { label: 'CDY', url: 'https://cdy.chain.link' },
    ],
  },
  {
    label: 'Cross-chain',
    Icon: SvgCrossChain,
    items: [
      { label: 'Explorer', url: 'https://ccip.chain.link' },
      { label: 'Lane Status', url: 'https://ccip.chain.link/status' },
      { label: 'Token Manager', url: 'https://tokenmanager.chain.link' },
      { label: 'Directory', url: 'https://docs.chain.link/ccip/directory' },
    ],
  },
  {
    label: 'Compute',
    Icon: SvgCompute,
    items: [
      { label: 'Automation', url: 'https://automation.chain.link' },
      { label: 'Functions', url: 'https://functions.chain.link' },
      { label: 'VRF', url: 'https://vrf.chain.link' },
    ],
  },
  {
    label: 'Tools',
    Icon: SvgWrench,
    items: [
      { label: 'Faucets', url: 'https://faucets.chain.link' },
      { label: 'PegSwap', url: 'https://pegswap.chain.link' },
    ],
  },
  {
    label: 'Economics',
    Icon: SvgCoinsStack,
    items: [
      {
        label: 'Staking',
        items: [
          { label: 'Overview', url: 'https://staking.chain.link' },
          { label: 'Rewards', url: 'https://staking.chain.link/rewards' },
        ],
      },
      { label: 'Rewards', url: 'https://rewards.chain.link' },
      { label: 'Metrics', url: 'https://metrics.chain.link' },
      { label: 'Reserve', url: 'https://metrics.chain.link/reserve' },
    ],
  },

  {
    label: 'Learn',
    Icon: SvgFileCode1,
    items: [
      { label: 'Docs', url: 'https://docs.chain.link' },
      { label: 'DevHub', url: 'https://dev.chain.link' },
      { label: 'Certification', url: 'https://dev.chain.link/certification' },
      { label: 'Talk to Expert', url: 'https://chain.link/contact' },
    ],
  },
] as const