import React from 'react'

interface DropdownItem {
  label: string
  url: string
  trackable: string
}

interface SubNavDropdownProps {
  id: string
  items: DropdownItem[]
  ariaLabelledBy: string
  title?: string
}

const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, ariaLabelledBy, title }) => {
  return (
    <div
      id={id}
      className="o-header__subnav-dropdown"
      data-o-header-subnav-dropdown-modal
      role="dialog"
      aria-modal="true"
      aria-labelledby={ariaLabelledBy}
    >
      {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
      <button
        className="o-header__subnav-dropdown-close"
        data-o-header-subnav-dropdown-close
        aria-label="Close menu"
        type="button"
      >
        <span className="o-header__subnav-dropdown-close-icon" />
      </button>
      <ul className="o-header__subnav-dropdown-list">
        {items.map((item, index) => (
          <li key={index} className="o-header__subnav-dropdown-item">
            <a href={item.url} data-trackable={item.trackable} className="o-header__subnav-dropdown-link">
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default SubNavDropdown