import React from 'react';

type PageMetaProps = {
  title?: string | null;
  tabs?: { name: string; href: string; }[];
  tabClicked?: string;
  onTabClick?: (value: string) => void;
  searchBar?: React.ReactNode;
  tabType?: string;
}


export default function PageMeta(
  { title = null,
    tabs = [],
    tabClicked = '',
    onTabClick,
    searchBar = null,
    tabType = 'link'
  }: PageMetaProps
) {
  const handleTabClick = (tab: { name: string; href: string; value?: string; }, index: number) => {
    if (onTabClick) {
      const value = tab.name;
      onTabClick(value);
    }
  };

  return (
    <div className="pageMeta">
      <div className="container pageHeading">
        <h1 className="text-h1-bold">{title}</h1>
        {searchBar}
      </div>
      {tabs.length > 0 && (
        <nav className="tab pageTab">
          <div className="container tab-container">
            <div className="tab-scrollContainer" onClick={() => console.log("test")}>
              <ul className="tab-list">
                {tabs.map(
                  (tab, index) => (
                    <li key={index} className={`tab-item ${tabClicked === tab.name ? 'tab-active' : ''}`} data-scroll-flag={index === 0}>
                      <a className="tab-target"
                        href={tab.href}
                        onClick={(e) => {
                          if (tabType === 'button') {
                            e.preventDefault();

                            handleTabClick(tab, index);
                            console.log(tab);
                          }
                        }}
                      >{tab.name}</a>
                    </li>
                  )
                )}
              </ul>
            </div>
          </div>
          <div className="tab-controlContainer">
            <button
              type="button"
              className="tab-control tab-control--prev button button--icon"
            >
              <i className="icon-arrowLeft"></i>
            </button>
            <button
              type="button"
              className="tab-control tab-control--next button button--icon"
            >
              <i className="icon-arrowRight"></i>
            </button>
          </div>
        </nav>

      )
      }
    </div >
  );

}