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

const TabsContent = (props) => {
  const {
    defaultActiveKey = '1',
    center = false,
    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, index) => (
          <>
            <div
              key={item.key}
              className={`${styles.tabsItem} ${
                active == item.key ? styles.active : ''
              }`}
              onClick={() => {
                setActive(item.key);
                onChange(item.key);
              }}
            >
              {item.label}
            </div>
            {index !== items.length - 1 && (
              <Divider
                type="vertical"
                style={{
                  height: '0.5rem',
                  width: '1.5px',
                  backgroundColor: '#BCBABA',
                }}
              />
            )}
          </>
        ))}
      </div>
      <div>{renderContent}</div>
    </div>
  );
};
export default TabsContent;