import React from 'react'
import { ContentProps } from '../../types'
import { ContentTree } from '@financial-times/content-tree'

interface VideoProps extends ContentProps<ContentTree.Video> {}

const Video: React.FC<VideoProps> = ({ content: { id, title } }) => {
  return (
    <div
      className="n-content-video n-content-video--internal"
      data-component="video"
    >
      <div
        className="n-content-video__placeholder"
        data-o-component="o-video"
        data-o-video-id={id}
      >
        <a
          href={`https://www.ft.com/content/${id}`}
          data-embedded={true}
          data-asset-type="video"
          data-trackable="link"
        >
          <span>{title ? `Video: ${title}` : 'Watch the video'}</span>
        </a>
      </div>
    </div>
  )
}

export default Video