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

const TabsContent = (props) => {
  const { defaultActiveKey = '1', center = true, items = {}, onChange } = props;
  const [active, setActive] = useState(defaultActiveKey);
  const renderContent = useMemo(() => {
    return items.find((item) => item.key == active).children;
  }, [active, items]);
  return (
    <div>
      <div
        className={styles.tabsTitle}
        style={center ? { justifyContent: 'center' } : {}}
      >
        {items.map((item) => (
          <div
            key={item.key}
            className={`${styles.tabsItem} ${
              active == item.key ? styles.active : ''
            }`}
            onClick={() => {
              setActive(item.key);
              onChange(item.key);
            }}
          >
            {item.label}
          </div>
        ))}
      </div>
      <div>{renderContent}</div>
    </div>
  );
};
export default TabsContent;