import { css } from '@emotion/css'
import type { EmailParticipant } from '@inject/graphql/fragments/EmailParticipant.generated'
import type { FC } from 'react'
import InstructorAddressLabel from './InstructorAddressLabel'

const wrapper = css`
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25rem;
  align-items: end;
`

const instructorAddressLabel = css`
  display: flex;
`

interface SubtitleProps {
  showDescription: boolean
  participants: EmailParticipant[]
}

const Subtitle: FC<SubtitleProps> = ({ showDescription, participants }) =>
  showDescription ? (
    <div className={wrapper}>
      {participants.map((participant, index) => (
        <div key={participant.id} className={instructorAddressLabel}>
          <InstructorAddressLabel participant={participant} />
          {index < participants.length - 1 && ', '}
        </div>
      ))}
    </div>
  ) : (
    participants.map(participant => participant.address).join(', ')
  )

export default Subtitle
