'use client'

import { useEffect, useState } from 'react'
import { RotateCw } from 'lucide-react'
import { debugProps } from '@/lib/debug'

export function LandscapeGuard({ children }: { children: React.ReactNode }) {
  const [isPortrait, setIsPortrait] = useState(false)

  useEffect(() => {
    const mq = window.matchMedia('(orientation: portrait)')
    const update = () => setIsPortrait(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  return (
    <>
      {children}
      {isPortrait && (
        <div
          role="alert"
          aria-live="assertive"
          className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-background text-foreground p-6"
          {...debugProps('landscape-guard', 'LandscapeGuard', 'components/mobile/landscape-guard.tsx')}
        >
          <RotateCw className="size-12 text-primary" />
          <p className="text-base font-medium text-center" data-debug-id="landscape-guard__title">Draai je telefoon naar landscape</p>
        </div>
      )}
    </>
  )
}