import { ProjectTab } from "../../types";
import { projectTabs } from "../../consts/galleryPage";
import useStore from "../../store/store";

const GalleryTabs = () => {
  const { selectedTab, setSelectedTab } = useStore();

  const handleOnTabClick = (tab: ProjectTab) => {
    return () => {
      setSelectedTab(tab);
    };
  };

  return (
    <div className="pb-16">
      <div className="grid grid-cols-7 text-[#9c8eba] font-semibold select-none">
        {projectTabs.map((tab) => {
          const isSelected = selectedTab.id === tab.id;

          return (
            <div
              onClick={handleOnTabClick(tab)}
              className={`border-b border-[#bca6ea] pb-3 cursor-pointer transition-colors duration-300 ${
                isSelected
                  ? "text-white border-b-white"
                  : "hover:text-[#edaedd]"
              }`}
              key={tab.id}
            >
              {tab.title}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default GalleryTabs;
