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

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

const WorkshopData = ({ title, workshop }) => {
  return (
    <>
      <StyledBoxContainer>
        <Typography variant="h3">Workshops - {title}</Typography>
        <DialogButton
          anchor={({ open }) => (
            <ActionButton onClick={open} variant="text">
              +Add Workshop
            </ActionButton>
          )}
          content={({ close }) => (
            <WorkshopForm data={null} hideDialog={close} />
          )}
          title="Add Workshops"
        />
      </StyledBoxContainer>
      <StyledBoxCard>
        {workshop.map((item) => (
          <WorkshopCard data={item} />
        ))}
      </StyledBoxCard>
    </>
  )
}

export default WorkshopData
