import { FC, useEffect, useState } from 'react';
import styles from './index.less';

interface PageProps {
  dataSource: { id: string | number; name: string }[]; // tabs
  activeTab: number; // 当前选中的tab
  onChange: (id: any) => void;
}

const TabsComp: FC<PageProps> = ({ dataSource, activeTab, onChange }) => {
  return (
    <div className={styles.tabs}>
      {dataSource.map((item: any, i: number) => {
        return (
          <div
            key={i}
            className={`${activeTab == item.id ? styles.active_tab : styles.item_tab}`}
            onClick={() => {
              if (item.id == activeTab) return;
              onChange(item.id);
            }}
          >
            <div style={{ position: 'relative' }}>
              {item.name}
              <div className={`${activeTab == item.id ? styles.active_line : ''}`}></div>
            </div>
          </div>
        )
      })}
    </div>
  )
}

export default TabsComp