import React, { useState } from "react";
import { useWindowSize } from "usehooks-ts";

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs/tabs";
import { cn } from "@/libs/utils";

interface NavigationTabItemprops {
  value: string;
  label: string;
  onClick: () => void;
}
export interface NavigationTabsProps {
  items: Omit<NavigationTabItemprops, "onClick">[];
  onChange?: (value: string) => void;
  className?: string;
}

const NavigationTabItem = ({
  value,
  label,
  onClick: handleClick,
}: NavigationTabItemprops) => {
  return (
    <TabsTrigger
      value={value}
      className="!bg-transparent py-[9px]"
      onClick={handleClick}
    >
      {label}
    </TabsTrigger>
  );
};

const NavigationTab = ({ items, onChange, className }: NavigationTabsProps) => {
  const windowSize = useWindowSize();
  const [selectedTab, setSelectedTab] = useState(items?.[0]?.value || "");
  const handleClickTab = (val: string) => {
    setSelectedTab(val);
    onChange?.(val);
  };
  const checkTabWidth = items.length * 120 > windowSize.width;

  return (
    <div>
      <Tabs
        value={selectedTab}
        className={cn(
          "my-4 shadow-lg",
          checkTabWidth ? "overflow-x-auto" : "justify-center",
          className,
        )}
      >
        <TabsList>
          {items.map((item) => (
            <NavigationTabItem
              {...item}
              key={item.value}
              onClick={() => handleClickTab(item.value)}
            />
          ))}
        </TabsList>
      </Tabs>
    </div>
  );
};

export default NavigationTab;