'use client'

import { useState } from 'react'
import { youtubeVideoId } from '../lib/youtube'

export default function YouTubePlayer({ url }: { url: string }) {
  const [loaded, setLoaded] = useState(false)
  const id = youtubeVideoId(url)
  return (
    <figure style={{ margin: '1.5rem 0' }}>
      <div style={{ aspectRatio: '16 / 9', width: '100%', background: '#111827', borderRadius: '0.5rem', overflow: 'hidden' }}>
        {loaded && id ? (
          <iframe
            src={`https://www.youtube-nocookie.com/embed/${id}`}
            title="مشغل فيديو YouTube"
            referrerPolicy="strict-origin-when-cross-origin"
            allow="encrypted-media; picture-in-picture; fullscreen"
            allowFullScreen
            ref={frame => { frame?.focus() }}
            tabIndex={0}
            style={{ display: 'block', width: '100%', height: '100%', border: 0 }}
          />
        ) : (
          <button type="button" onClick={() => setLoaded(true)} style={{ width: '100%', height: '100%', background: 'transparent', color: '#fff', border: 0, cursor: 'pointer', font: 'inherit' }}>
            تشغيل فيديو YouTube
          </button>
        )}
      </div>
      <figcaption>
        <a href={url} target="_blank" rel="noopener noreferrer" className="text-link">شاهد الفيديو على YouTube</a>
      </figcaption>
    </figure>
  )
}