/**
 * DesktopPreviewAside — sticky preview column shown on lg+ next to the form.
 * Extracted from AddDealShell as part of arch spec 06.
 */
'use client';

import { Suspense, type ReactNode } from 'react';
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 DesktopPreviewAsideProps {
  retryKey: number;
  onRetry: () => void;
  /** Pre-rendered <PhonePreviewLazy deal={...} /> from the shell. */
  preview: ReactNode;
}

export function DesktopPreviewAside({ retryKey, onRetry, preview }: DesktopPreviewAsideProps) {
  const t = useT('vendor_add_deal');
  return (
    <aside aria-label={t('preview_title')} className="hidden lg:sticky lg:top-4 lg:block lg:w-72">
      <h2 className="text-text-primary mb-3 text-sm font-semibold">{t('preview_title')}</h2>
      <ErrorBoundary
        key={`phone-preview-desktop-${retryKey}`}
        fallback={<RetryPanel variant="inline" onRetry={onRetry} />}
      >
        <Suspense fallback={<PhonePreviewSkeleton />}>{preview}</Suspense>
      </ErrorBoundary>
    </aside>
  );
}