import { ReactElement } from 'react';
import { ViewData } from '../view-data/ViewData';

/**
 * A Template is a stateless component that composes other components.
 * It receives ViewData and event handlers.
 * 
 * Rules:
 * - Stateless (no useState, useEffect)
 * - Receives ViewData and event handlers
 * - Composes components and UI elements
 * - No business logic
 * - No data fetching
 * - CANNOT import from ui/, MUST use components/
 */
export type Template<P extends TemplateProps<any>> = (props: P) => ReactElement | null;

export interface TemplateProps<T extends ViewData> {
  viewData: T;
}

/**
 * A Client Wrapper (PageClient) manages state and event handlers.
 * It wires server data (ViewData) to a Template.
 * 
 * Rules:
 * - Manages client state and event handlers
 * - No UI rendering logic (except loading/error states)
 * - MUST return a Template
 * - CANNOT import from ui/, MUST use components/
 */
export type ClientWrapper<T extends ViewData, P extends ClientWrapperProps<T> = ClientWrapperProps<T>> = 
  (props: P) => ReactElement<TemplateProps<T>> | null;

export interface ClientWrapperProps<T extends ViewData> {
  viewData: T;
}