const Youtube = props => {
  const { link, rest } = props
  const src = link.match(/\?v=(.*)/)[1]
  return (
    <iframe
      width='285'
      height='160'
      src={`https://www.youtube.com/embed/${src}`}
      frameBorder='0'
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      allowFullScreen
      {...rest}
    />
  )
}

const Spotify = props => {
  const { link, rest } = props
  const src = link.match(/track\/(.*)/)[1]
  return (
    <iframe
      src={`https://open.spotify.com/embed/track/${src}`}
      width='300'
      height='80'
      frameBorder='0'
      allowtransparency='true'
      allow='encrypted-media'
      {...rest}
    />
  )
}

const Media = props => {
  if (props.link.includes('youtube.com')) {
    return <Youtube {...props} />
  } else if (props.link.includes('spotify.com')) {
    return <Spotify {...props} />
  } else {
    return <p>Link not recognized.</p>
  }
}

export default Media