import { useState } from 'react';

const Navbar = ({ items, setShowContent, align }: any) => {
  const [selectedContent, setSelectedContent] = useState(0);
  return (
    <nav>
      {items && (
        <ul
          className={`flex rounded-md flex-row gap-[30px] justify-${align} border-[1px] border-stroke  w-full items-center text-[16px] text-black-2 mb-4 dark:text-white overflow-auto p-2`}>
          {items &&
            items.map((item: any) => (
              <li key={item.value}>
                <button
                  type='button'
                  onClick={() => {
                    setShowContent(item.value);
                    setSelectedContent(item.value);
                  }}
                  className={`hover:bg-bodydark1 dark:hover:bg-black rounded-md p-2 px-5 ${
                    item.value == selectedContent && 'bg-bodydark dark:bg-black'
                  }`}>
                  {item.label}
                </button>
              </li>
            ))}
        </ul>
      )}
    </nav>
  );
};

export default Navbar;