/**
 * Rotate Prompt Component
 *
 * Shown when device is in portrait orientation to prompt user to rotate.
 * Follows pattern: components/Offline/OfflineStatus.tsx
 */

import React from 'react';
import Icon from '@mdi/react';
import { mdiScreenRotation } from '@mdi/js';

interface RotatePromptProps {
  /** Whether to show the prompt */
  show: boolean;
  /** Custom message to display */
  message?: string;
}

/**
 * Full-screen overlay prompting user to rotate their device.
 * Displays a rotation icon and customizable message.
 */
export const RotatePrompt: React.FC<RotatePromptProps> = ({
  show,
  message = 'Please rotate your device for the best experience',
}) => {
  if (!show) return null;

  return (
    <div className='fixed inset-0 z-[100] flex items-center justify-center bg-black/90'>
      <div className='text-center text-white px-8'>
        <Icon
          path={mdiScreenRotation}
          size={3}
          className='mx-auto mb-6 animate-pulse'
        />
        <p className='text-lg font-medium'>{message}</p>
        <p className='text-sm text-gray-400 mt-2'>
          This presentation is optimized for landscape viewing
        </p>
      </div>
    </div>
  );
};

export default RotatePrompt;