/* eslint-disable react/jsx-key */

import { Typography } from '@mui/material'
import ActionButton from '../../ActionButton'
import { DialogButton } from '../../ModalButtons'
import ResearchProjectCard from './ResearchProjectCard'
import ResearchProjectForm from './ResearchProjectForm'
import { StyledBoxCard, StyledBoxContainer } from './Styles'

const ResearchProjectData = ({ title, ResearchProject }) => {
  return (
    <>
      <StyledBoxContainer>
        <Typography variant="h3">ResearchProject - {title}</Typography>
        <DialogButton
          anchor={({ open }) => (
            <ActionButton onClick={open} variant="text">
              +Add Research Project
            </ActionButton>
          )}
          content={({ close }) => (
            <ResearchProjectForm data={null} close={close} />
          )}
          title="Add ResearchProject"
        />
      </StyledBoxContainer>
      <StyledBoxCard>
        {ResearchProject.map((item) => (
          <ResearchProjectCard data={item} />
        ))}
      </StyledBoxCard>
    </>
  )
}

export default ResearchProjectData
