import React from 'react'
import type { ContentTree } from '@financial-times/content-tree'
import type { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
import { ContentProps } from '../types'

export const List: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.List>>
> = (props) =>
  props.content.ordered ? (
    <ol className="o3-editorial-typography-list-ordered">{props.children}</ol>
  ) : (
    <ul className="o3-editorial-typography-list-unordered">{props.children}</ul>
  )

export const ListItem: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.ListItem>>
> = (props) => <li>{props.children}</li>

export const Link: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Link>>
> = (props) => (
  <a href={props.content.url} title={props.content.title} data-trackable="link">
    {props.children}
  </a>
)

export const Blockquote: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Blockquote>>
> = (props) => {
  return (
    <blockquote className="n-content-blockquote o3-editorial-typography-blockquote">
      {props.children}
    </blockquote>
  )
}

export const Cite: React.FC<
  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.Cite>>
> = (props) => {
  return (
    <cite className="o3-editorial-typography-blockquote__author">
      {props.children}
    </cite>
  )
}

export const LineBreak: React.FC = () => <br />

export const HorizontalRule: React.FC = () => <hr />

export const Emphasis: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Emphasis>>
> = (props) => <em>{props.children}</em>

export const Strong: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Strong>>
> = (props) => <strong>{props.children}</strong>

export const Strikethrough: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Strikethrough>>
> = (props) => <s>{props.children}</s>

export const CccFallbackText: React.FC<
  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.CccFallbackText>>
> = (props) => <div>{props.children}</div>

export const TableRow: React.FC<
  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableRow>>
> = (props) => <tr>{props.children}</tr>

export const TableFooter: React.FC<
  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableFooter>>
> = (props) => (
  <tfoot>
    <tr>
      <td colSpan={1000} className="o-table-footnote">
        {props.children}
      </td>
    </tr>
  </tfoot>
)

export const TableCaption: React.FC<
  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableCaption>>
> = (props) => (
  <caption className="n-content-body__caption n-content-body__caption--auto o3-editorial-typography-subheading">
    {props.children}
  </caption>
)