// import

import { useEffect } from 'react';
import { sectionNavigation } from '/data/www/aia-official-en-main/web/src/js/components/sectionNavigation.js'
import { navigation } from '/data/www/aia-official-en-main/web/src/js/patterns/navigation.js'

type Props = {
  links: {
    name: string;
    href: string;
    default?: boolean;
  }[];

}


export default function SectionNavigation(
  { links = [] }: Props
) {

  useEffect(() => {
    sectionNavigation();
    navigation();
  }, []);

  return (


    <div className="sectionNavigation pageSectionNavigation">
      <div className="container sectionNavigation-container">
        <div className="sectionNavigation-selectContainer">
          <select
            className="sectionNavigation-select"
            name="sectionNavigation"
            id="sectionNavigation"
            defaultValue={links.find(link => link.default)?.href || ''} // Default to the first link if no default is set
            onChange={(e) => {
              const selectedHref = e.target.value;
              window.location.href = selectedHref;
            }}
          >

            {
              links.map(
                (link, index) => (
                  <option
                    key={index}
                    value={link.href}
                  >
                    {link.name}
                  </option>
                )
              )

            }

          </select>
          <i className="icon-arrowDown sectionNavigation-selectIcon"></i>
        </div>
        <nav className="sectionNavigation-navContainer">
          <ul className="sectionNavigation-navList">
            {links.map(
              (
                link,
                index
              ) => (
                <li
                  key={index}
                  className={
                    link.default ? 'sectionNavigation-active' : ''
                  }
                >
                  <a href={link.href}>
                    {link.name}
                  </a>
                </li>))}
          </ul>
        </nav>
      </div>
    </div>

  );
}