// TabsComponent.tsx
import { View } from "@tarojs/components";
import React, { useState } from "react";
import styles from "./index.module.less";

interface Tab {
  id: number;
  label: string;

}

interface TabsProps {
  defaultActiveTab?: number;
  tabs?: Tab[];
  onTabChange:(id:number) => void
}

const TabsComponent: React.FC<TabsProps> = ({
  defaultActiveTab = 0,
  tabs = [],
  onTabChange,
}) => {
  const [activeTab, setActiveTab] = useState<number>(defaultActiveTab);

  const totalTabs = tabs.length;
  const tabWidth = `${100 / totalTabs}%`;

  return (
    <View className={styles.tabsContainer}>
      <View className={styles.tabsHeader}>
        <View className={styles.tabsList}>
          {tabs.map((tab) => (
            <View
              key={tab.id}
              onClick={() =>{
                setActiveTab(tab.id)
                onTabChange && onTabChange(tab.id)
              }}
              className={`${styles.tabButton} ${activeTab === tab.id ? styles.active : ""}`}
              style={{ width: tabWidth }}
            >
              {tab.label}
            </View>
          ))}
        </View>

        <View
          className={styles.indicator}
          style={{
            left: `calc(${(activeTab * 100) / totalTabs}% + calc(${tabWidth} / 2 - 10px))`,
          }}
        />
      </View>


    </View>
  );
};

export default TabsComponent;
