import React from 'react'

//HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
import { presets, Teaser } from '@financial-times/x-teaser'
import { ContentProps } from '../../types'
import type * as ComponentWorkarounds from '../Workarounds'

// Renders a Recommended teaser componentx
// `<Teaser>` is imported from x-dash
// https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)

interface RecommendedListProps
  extends ContentProps<ComponentWorkarounds.RecommendedList> {}

const RecommendedList: React.FC<RecommendedListProps> = ({ content }) => {
  const { heading, children } = content
  if (!children || children.length === 0) {
    return null
  }

  return (
    <aside
      aria-labelledby="aside-label"
      className="n-content-recommended-list"
      data-component="recommended-list"
    >
      <p className="n-content-recommended-list__title o3-type-title-lg">
        {heading}
      </p>
      <div className="n-content-recommended-list__teasers">
        {children.map((child, index) => (
          <Teaser
            key={child?.id || index}
            modifiers={['stacked']}
            {...presets.SmallHeavy}
            {...child.teaser}
            metaPrefixText={'By'}
            metaLink={{
              prefLabel: child.teaser?.clientName,
              // clientName is a free form text field. Currently, there is no way to map it to an organisation
              // from the annotations. For now, we're linking it to the article url.
              // A property like isSponsoredBy could be added in future to support this properly.
              url: child.teaser?.url,
            }}
          />
        ))}
      </div>
    </aside>
  )
}

export default RecommendedList
