import { useScale } from '@/contexts/ScaleContext'

/**
 * 横屏提示组件
 * 在移动端竖屏时显示提示，引导用户横屏观看
 */
export function RotateHint() {
  const { isMobilePortrait } = useScale()

  if (!isMobilePortrait) return null

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background:
          'rgba(0,0,0,0.55) radial-gradient(circle at center, rgba(255,255,255,0.1), rgba(0,0,0,0.6))',
        color: '#fff',
        zIndex: 9999,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: '24px',
        fontSize: '20px',
        lineHeight: 1.5,
      }}
    >
      请横屏观看，以获得最佳体验
    </div>
  )
}