import { Add } from '@mui/icons-material'
import { Typography } from '@mui/material'
import { DrawerButton } from '../../ModalButtons'
import { DatabaseConfigurationForm } from '../DatabaseConfigurationForm'
import { StyledSelectAttachmentsContainer } from '../styles'

export const AddConnectionDrawerButton = ({ type }) => {
  return (
    <DrawerButton
      key={'1'}
      anchor={({ open }) => (
        <StyledSelectAttachmentsContainer onClick={open}>
          <Add />
          <Typography sx={{ margin: '0px 10px', opacity: '0.6' }}>
            Add Database Configuration
          </Typography>
        </StyledSelectAttachmentsContainer>
      )}
      content={({ close }) => (
        <DatabaseConfigurationForm
          type={type}
          data={null}
          close={close}
          successToastMessage="Created Database Configuration"
        />
      )}
      title="Add Database Configuration"
    />
  )
}
