'use client';

import React from 'react';
import { PageWrapper, PageWrapperProps } from './PageWrapper';

/**
 * Stateful Page Wrapper - CLIENT SIDE ONLY
 * Adds loading/error state management for client-side fetching
 *
 * Usage:
 * ```typescript
 * 'use client';
 *
 * export default function ProfilePage() {
 *   const { data, isLoading, error, refetch } = usePageData(...);
 *
 *   return (
 *     <StatefulPageWrapper
 *       data={data}
 *       isLoading={isLoading}
 *       error={error}
 *       retry={refetch}
 *       Template={ProfileTemplate}
 *       loading={{ variant: 'skeleton', message: 'Loading profile...' }}
 *     />
 *   );
 * }
 * ```
 */
export function StatefulPageWrapper<TData>({
  data,
  isLoading = false,
  error = null,
  retry,
  Template,
  loading,
  errorConfig,
  empty,
  children,
  className = '',
}: PageWrapperProps<TData>) {
  // Same implementation but with 'use client' for CSR-specific features
  return (
    <PageWrapper
      data={data}
      isLoading={isLoading}
      error={error}
      retry={retry}
      Template={Template}
      loading={loading}
      errorConfig={errorConfig}
      empty={empty}
      className={className}
    >
      {children}
    </PageWrapper>
  );
}

// Re-export types for convenience
export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from './PageWrapper';