import cx from 'clsx';
import { isEqual } from 'lodash-es';
import { useCallback, useState } from 'react';
import styles from './Tab.module.css';

type TabProps = {
  tabs: { title: string; id: unknown }[];
  onActive?: (id: unknown) => void;
};

export function Tab({ tabs = [], onActive }: TabProps) {
  const [active, setActive] = useState(0);
  const handleActivate = useCallback((index: number) => {
    setActive(index);
    onActive?.(tabs[index].id);
  }, []);

  return (
    <div className={styles.tabs_container}>
      {tabs.map((tab, index) => (
        <div
          key={`tab_${index}_${tab.id}`}
          className={cx(styles.tab, isEqual(index, active) && styles.actived)}
          onClick={() => handleActivate(index)}>
          {tab.title}
        </div>
      ))}
    </div>
  );
}