import React from 'react'

import type {
  ConceptFragment,
  TopperFragment,
} from '@financial-times/cp-content-pipeline-client'

import { FollowButtonSlot } from './FollowButtonSlot'

type ColumnistProps = {
  authorConcepts: ConceptFragment[]
  followButtonVariant?: TopperFragment['followButtonVariant']
  followButtonSlot?: FollowButtonSlot
}

const Columnists: React.FC<ColumnistProps> = ({
  authorConcepts,
  followButtonVariant,
  followButtonSlot,
}) => {
  return (
    <div className="o-topper__columnist">
      <ul className="o-topper__columnist-list">
        {authorConcepts.map((author) => {
          return (
            <li>
              <a
                className="o-topper__columnist-name n-content-tag--with-follow"
                href={author.relativeUrl ?? undefined}
                data-trackable="columnist"
              >
                {author.prefLabel}
              </a>
              {/* Only show follow button if there's a single author */}
              {authorConcepts.length === 1 &&
                followButtonSlot &&
                followButtonSlot({
                  conceptId: author.id,
                  conceptName: author.prefLabel,
                  variant: followButtonVariant ?? 'standard',
                })}
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Columnists