import ContentComponent from '@/components/ContentComponent'
import { Button } from '@blueprintjs/core'
import { css } from '@emotion/css'
import type { EmailDetails } from '@inject/graphql/fragment-types'
import type { FC } from 'react'
import { alignRight } from './classes'

const wrapper = css`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`

interface EmailContentProps {
  details: EmailDetails
  teamId: string
  exerciseId: string
  inInstructor: boolean
  onClose?: () => void
}

const EmailContent: FC<EmailContentProps> = ({
  details,
  teamId,
  exerciseId,
  inInstructor,
  onClose,
}) => (
  <div className={wrapper}>
    <ContentComponent
      content={details.content}
      teamId={teamId}
      exerciseId={exerciseId}
      inInstructor={inInstructor}
    />
    {onClose && (
      <div className={alignRight}>
        <Button text='Close' onClick={onClose} />
      </div>
    )}
  </div>
)

export default EmailContent
