import React from 'react';
import { Tabs, Tab } from 'carbon-components-react';
import styles from './patient.scss';
import UnderARV from './Tabs/UnderARV';
import BeforeARV from './Tabs/BeforeARV';
import { forwardRef } from 'react'

interface PatientTabIndexProps {
  patientUuid?: string;
}

interface TabPanelProps {
  label: string,
  value: number,
  index: number,
  component?: any,
}

const patientTabConfig = [
  {
    label: "Đang điều trị ARV",
    index: 0,
    component: <UnderARV />
  },
  {
    label: "Trước ARV",
    index: 1,
    component: <BeforeARV />
  }
]

const PatientTabIndex: React.FC<PatientTabIndexProps> = ({ }) => {

  const [value, setValue] = React.useState(0);

  const handleChangeValue = (value: number) => {
    setValue(value);
  };

  return (
    <div className={styles.basicCard}>
      <div className={styles.basicCardHeader}>
        <span>Các thông tin cần quan tâm </span>
      </div>
      <div className={styles.basicCardBody}>
        <Tabs
          type="container"
          onSelectionChange={handleChangeValue}
        >
          {patientTabConfig.map((item, index) => {
            return (
              <Tab
                id={item.index.toString()}
                label={item.label}
                className="tab-14rem"
              >
                {value === index && (
                  item.component
                )}
              </Tab>
            )
          })}
        </Tabs>
      </div>
    </div>
  );
}


export default PatientTabIndex;