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

interface YoutubeVideoProps extends ContentProps<ContentTree.YoutubeVideo> {}

const YoutubeVideo: React.FC<YoutubeVideoProps> = ({ content: { url } }) => {
  try {
    const parsed = new URL(url)
    const id = parsed.searchParams.get('v')

    if (!id) {
      return null
    }

    return (
      <div
        className="n-content-video n-content-video--youtube"
        data-component="youtube-video"
        data-youtube-id={id}
      >
        <div className="n-content-video__placeholder"></div>
      </div>
    )
  } catch {
    return null
  }
}

export default YoutubeVideo