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 component
// `<Teaser>` is imported from x-dash
// https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)

interface RecommendedProps
  extends ContentProps<ComponentWorkarounds.Recommended> {}

const Recommended: React.FC<RecommendedProps> = ({
  content: { heading, teaser },
}) => {
  if (!teaser) {
    return null
  }

  return (
    <aside
      aria-labelledby="aside-label"
      className={
        'n-content-recommended--single-story n-content-recommended--inset'
      }
      data-component="recommended"
    >
      <p className="n-content-recommended__title o3-type-body-highlight">
        {heading}
      </p>
      <Teaser modifiers={['stacked']} {...presets.SmallHeavy} {...teaser} />
    </aside>
  )
}

export default Recommended