import React, { useContext } from 'react'

import { ContentTree } from '@financial-times/content-tree'

import { ContentProps } from '../../types'
import { CarouselCardHeadingLevelContext } from '../Carousel'

// required for items with nested external items that need to resolve assets
interface CarouselCardProps
  extends ContentProps<ContentTree.transit.CarouselCard> {}

/**
 * Renders a CarouselCard component
 */
const CarouselCard: React.FC<React.PropsWithChildren<CarouselCardProps>> = ({
  content: { id, title, copy, additionalInfo },
  children,
}) => {
  const headingLevel = useContext(CarouselCardHeadingLevelContext)
  const HeadingTag = headingLevel === 2 ? 'h2' : 'h3'
  return (
    <li
      className="cp-carousel__card"
      data-component="carousel-card"
      data-component-id={id}
      tabIndex={0}
    >
      {title && (
        <HeadingTag className="o3-type-body-highlight">{title}</HeadingTag>
      )}
      {children}
      <p>{copy}</p>
      {additionalInfo && (
        <p className="cp-carousel__card__additional o3-type-detail">
          {additionalInfo}
        </p>
      )}
    </li>
  )
}

export default CarouselCard