import NoDataSection from '../NoDataSection'
import StyledTabsContainer from '../StyledTabsContainer'
import ResearchProjectData from './ResearchProjectData'
import ResearchProjectForm from './ResearchProjectForm'

function ResearchProjects({ researchProject }) {
  const tabs = [
    {
      key: 'ResearchProject',
      label: 'Research Project',
      component: (
        <ResearchProjectData
          title={'Research Project'}
          ResearchProject={researchProject}
        />
      ),
    },
  ]
  const isResearchProject = researchProject && researchProject?.length > 0

  return isResearchProject ? (
    <>
      <StyledTabsContainer
        tabs={tabs}
        centered
        textColor="primary"
        indicatorBackgroundColor="primary"
      />
    </>
  ) : (
    <NoDataSection
      title="Research Project"
      subtitle="Add Research Project"
      addButtonTitle="Add Your Research Project"
      addButtonContent={({ close }) => (
        <ResearchProjectForm data={null} close={close} />
      )}
    />
  )
}

export default ResearchProjects
