// Generated with util/create-component.js
import { motion } from "framer-motion";
import React, { useEffect, useState } from "react";
import Sticky from "react-stickynode";
import Text from "../../UI/Text";
import { MenuTabProps } from "./MenuTab.types";

const MenuTab: React.FC<MenuTabProps> = ({ tabs, selectedTab }) => {
  const [selectedTabState, setSelectedTabState] = useState<string>(
    selectedTab ?? tabs[0].title
  );

  useEffect(() => {
    if (selectedTab) {
      setSelectedTabState(selectedTab);
    }
  }, [selectedTab]);

  return (
    <Sticky innerZ={100}>
      <div
        data-testid="MenuTab"
        className="nrc--MenuTab scrollbar-hide mx-auto flex w-full gap-[2rem] overflow-x-auto pc:w-[80rem]"
      >
        {tabs.map(({ title, onClickTab }) => {
          return (
            <div
              key={title}
              className="text-center cursor-pointer"
              style={{
                width: (80 - 2 * (tabs.length - 1)) / tabs.length + "rem",
              }}
              onClick={() => {
                setSelectedTabState(title);
                onClickTab();
              }}
            >
              <Text
                type={selectedTabState === title ? "B2" : "B6"}
                className={`whitespace-nowrap py-[1.2rem] ${
                  selectedTabState === title ? "text-blue-7 " : "text-gray-10"
                }`}
              >
                {title}
              </Text>
              {selectedTabState === title && (
                <motion.div
                  className="h-[0.2rem] bg-blue-7"
                  transition={{
                    type: "ease",
                  }}
                  initial={{ width: 0 }}
                  animate={{
                    width: "100%",
                  }}
                ></motion.div>
              )}
            </div>
          );
        })}
      </div>
    </Sticky>
  );
};

export default MenuTab;