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

const TabsContent = (props) => {
  const {
    defaultActiveKey = '1',
    center = true,
    small = false,
    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} ${small ? styles.small : ''}`}
        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;
