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 an "inset" variant Recommended teaser component
// to be used in Live Blogs
// `<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 RecommendedLivePost: React.FC<RecommendedProps> = ({
  content: { teaser },
}) => {
  if (!teaser) {
    return null
  }

  return (
    <aside
      aria-labelledby="aside-label"
      className={'n-content-recommended--single-story'}
      data-component="recommended"
    >
      <Teaser modifiers={['post']} {...presets.SmallHeavy} {...teaser} />
    </aside>
  )
}

export default RecommendedLivePost