import type { ReactNode } from 'react';

/**
 * قابِ اپ. روی گوشی تمام‌صفحه است؛ روی صفحه‌ی بزرگ (دسکتاپ) وسطِ صفحه با
 * عرضِ گوشی نشان داده می‌شود تا چیدمانِ موبایلی به هم نریزد.
 *
 * قبلاً یک «قابِ گوشی» ثابتِ ۳۹۰×۸۴۴ با ساعتِ ساختگی بود که روی گوشیِ واقعی
 * داخلِ صفحه یک گوشیِ نقاشی‌شده نشان می‌داد.
 */
export function AppShell({ children }: { children: ReactNode }) {
  return (
    <div className="flex h-[100dvh] w-full items-stretch justify-center sm:items-center sm:py-6">
      <div
        dir="rtl"
        className="relative flex h-full w-full max-w-[440px] flex-col overflow-hidden bg-page sm:h-[min(880px,100%)] sm:rounded-[36px] sm:shadow-2xl sm:ring-8 sm:ring-[#22223a]"
      >
        {children}
      </div>
    </div>
  );
}