/**
 * MobilePreviewSheet — full-screen mobile preview sheet.
 * Extracted from AddDealShell as part of arch spec 06.
 */
'use client';

import { Suspense, type ReactNode } from 'react';
import { Icon } from '@/components/ui/icons/Icon';
import { IconButton } from '@/components/ui/primitives/IconButton';
import { RetryPanel } from '@/components/ui/feedback/RetryPanel';
import { ErrorBoundary } from '@/components/ui/feedback/ErrorBoundary';
import { useT } from '@/lib/i18n/react';
import { PhonePreviewSkeleton } from './PhonePreviewSkeleton';

export interface MobilePreviewSheetProps {
  retryKey: number;
  onClose: () => void;
  onRetry: () => void;
  preview: ReactNode;
}

export function MobilePreviewSheet({
  retryKey,
  onClose,
  onRetry,
  preview,
}: MobilePreviewSheetProps) {
  const t = useT('vendor_add_deal');
  return (
    <div
      className="bg-surface-base fixed inset-0 z-50 flex flex-col items-center justify-center p-6 lg:hidden"
      role="dialog"
      aria-modal="true"
      aria-label={t('preview_title')}
    >
      <IconButton
        variant="ghost"
        size="md"
        shape="square"
        aria-label={t('preview_close')}
        onClick={onClose}
        className="mb-4 self-end"
      >
        <Icon name="X" size="md" aria-hidden={true} />
      </IconButton>
      <ErrorBoundary
        key={`phone-preview-mobile-${retryKey}`}
        fallback={<RetryPanel variant="inline" onRetry={onRetry} />}
      >
        <Suspense fallback={<PhonePreviewSkeleton />}>{preview}</Suspense>
      </ErrorBoundary>
    </div>
  );
}