'use client';

import dynamic from 'next/dynamic';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';

const ProfilePaymentTab = dynamic(
  () => import('@/components/profile/ProfilePaymentTab').then((m) => ({ default: m.ProfilePaymentTab })),
  { ssr: false, loading: () => <LoadingSpinner size="medium" /> }
);

export default function PaymentPage() {
  return (
    <div style={{ padding: 24 }} data-tour="payment-root">
      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24, color: 'var(--md-sys-color-on-surface)' }}>
        Подписки и оплата
      </h1>
      <ProfilePaymentTab />
    </div>
  );
}