video-popup.tsx

'use client'

import { useState } from 'react'
import { Dialog, DialogPanel } from '@headlessui/react'
import Script from 'next/script'
import clsx from 'clsx'
import xMarkIcon from '@iconify/icons-heroicons/x-mark-20-solid'
import { Icon } from '@/components/icon'
import { VimeoPlayer } from '@/components/vimeo-player'

function getVideoId(url?: string): string | undefined {
  if (!url) return undefined

  // YouTube: https://www.youtube.com/watch?v=VIDEO_ID
  const ytMatch = url.match(
    /(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/
  )
  if (ytMatch) return `youtube-${ytMatch[1]}`

  // Vimeo: https://player.vimeo.com/video/VIDEO_ID