Display Components

/**
 * Card container component
 * @param props - Card configuration
 * @returns React card element
 */
function Card(props: CardProps): JSX.Element;

interface CardProps {
  /** Card title */
  title?: React.ReactNode;
  /** Extra content in header */
  extra?: React.ReactNode;
  /** Header area style */
  headerStyle?: React.CSSProperties;
  /** Body area style */
  bodyStyle?: React.CSSProperties;
  /** Click handler for the card */
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  /** Card content */
  children?: React.ReactNode;
} & NativeProps<'--header-border-bottom' | '--body-padding' | '--header-padding'>;

/**
 * List container component
 * @param props - List configuration
 * @returns React list element
 */
function List(props: ListProps): JSX.Element;

interface ListProps {
  /** List header content */
  header?: React.ReactNode;
  /** List mode affects spacing and borders */
  mode?: 'default' | 'card';
  /** List content */
  children?: React.ReactNode;
} & NativeProps<'--header-font-size' | '--prefix-width' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right'>;

/**
 * List item component
 * @param props - ListItem configuration
 * @returns React list item element
 */
function ListItem(props: ListItemProps): JSX.Element;

interface ListItemProps {
  /** Item title */
  title?: React.ReactNode;
  /** Item description */
  description?: React.ReactNode;
  /** Prefix content (icon, avatar) */
  prefix?: React.ReactNode;
  /** Extra content on the right */
  extra?: React.ReactNode;
  /** Whether item is clickable */
  clickable?: boolean;
  /** Whether to show arrow indicator */
  arrow?: boolean | React.ReactNode;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Click handler */
  onClick?: (e: React.MouseEvent) => void;
  /** Item content */
  children?: React.ReactNode;
} & NativeProps;

interface ListRef {
  /** Access to the underlying element */
  nativeElement: HTMLDivElement | null;
}

// Usage through List namespace
declare namespace List {
  const Item: typeof ListItem;
}

import { List } from "antd-mobile";

<List header="Settings">
  <List.Item prefix={<IconOutline />} extra=">" onClick={() => {}}>
    Account
  </List.Item>
  <List.Item prefix={<IconOutline />} extra={<Switch />}>
    Notifications
  </List.Item>
  <List.Item prefix={<IconOutline />} arrow={false}>
    <div>Privacy</div>
    <div>Manage your privacy settings</div>
  </List.Item>
</List>

/**
 * Avatar display component
 * @param props - Avatar configuration
 * @returns React avatar element
 */
function Avatar(props: AvatarProps): JSX.Element;

interface AvatarProps {
  /** Avatar image source */
  src?: string;
  /** Alt text for image */
  alt?: string;
  /** Avatar size */
  size?: number | 'mini' | 'small' | 'middle' | 'large';
  /** Fallback content when image fails to load */
  fallback?: React.ReactNode;
  /** Whether avatar should be square */
  square?: boolean;
  /** Image load error handler */
  onError?: () => void;
  /** Avatar content (text, icon) */
  children?: React.ReactNode;
} & NativeProps<'--size' | '--border-radius'>;

/**
 * Badge status indicator
 * @param props - Badge configuration
 * @returns React badge element
 */
function Badge(props: BadgeProps): JSX.Element;

interface BadgeProps {
  /** Badge content (number, text) */
  content?: React.ReactNode;
  /** Badge color */
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
  /** Whether to show as dot instead of content */
  dot?: boolean;
  /** Whether badge is bordered */
  bordered?: boolean;
  /** Content to wrap with badge */
  children?: React.ReactNode;
} & NativeProps<'--right' | '--top' | '--color'>;

/**
 * Tag label component
 * @param props - Tag configuration
 * @returns React tag element
 */
function Tag(props: TagProps): JSX.Element;

interface TagProps {
  /** Tag color */
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
  /** Tag fill style */
  fill?: 'solid' | 'outline';
  /** Tag size */
  size?: 'mini' | 'small' | 'middle' | 'large';
  /** Tag content */
  children?: React.ReactNode;
} & NativeProps<'--text-color' | '--background-color' | '--border-color' | '--border-radius'>;

/**
 * Enhanced image component
 * @param props - Image configuration
 * @returns React image element
 */
function Image(props: ImageProps): JSX.Element;

interface ImageProps {
  /** Image source URL */
  src: string;
  /** Alternative text */
  alt?: string;
  /** Image width */
  width?: number | string;
  /** Image height */
  height?: number | string;
  /** Object fit style */
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  /** Placeholder content while loading */
  placeholder?: React.ReactNode;
  /** Fallback content on error */
  fallback?: React.ReactNode;
  /** Whether image is lazy loaded */
  lazy?: boolean;
  /** Load event handler */
  onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
  /** Error event handler */
  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
  /** Click handler */
  onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
} & NativeProps<'--width' | '--height' | '--border-radius'>;

/**
 * Empty state component
 * @param props - Empty configuration
 * @returns React empty element
 */
function Empty(props: EmptyProps): JSX.Element;

interface EmptyProps {
  /** Empty state image */
  image?: React.ReactNode;
  /** Image style */
  imageStyle?: React.CSSProperties;
  /** Empty state description */
  description?: React.ReactNode;
  /** Additional content */
  children?: React.ReactNode;
} & NativeProps<'--image-height'>;

/**
 * Error block display component
 * @param props - ErrorBlock configuration
 * @returns React error block element
 */
function ErrorBlock(props: ErrorBlockProps): JSX.Element;

interface ErrorBlockProps {
  /** Error status type */
  status?: ErrorBlockStatus;
  /** Error title */
  title?: React.ReactNode;
  /** Error description */
  description?: React.ReactNode;
  /** Error image */
  image?: React.ReactNode;
  /** Additional content */
  children?: React.ReactNode;
} & NativeProps<'--image-height' | '--image-height-small'>;

type ErrorBlockStatus = 'default' | 'disconnected' | 'empty' | 'busy';

/**
 * Create error block component programmatically
 * @param status - Error status type
 * @returns ErrorBlock component with predefined status
 */
function createErrorBlock(status: ErrorBlockStatus): React.ComponentType<Omit<ErrorBlockProps, 'status'>>;

/**
 * Result display component
 * @param props - Result configuration
 * @returns React result element
 */
function Result(props: ResultProps): JSX.Element;

interface ResultProps {
  /** Result status affecting icon and color */
  status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
  /** Result title */
  title?: React.ReactNode;
  /** Result description */
  description?: React.ReactNode;
  /** Custom result icon */
  icon?: React.ReactNode;
  /** Additional content */
  children?: React.ReactNode;
} & NativeProps<'--icon-size'>;

/**
 * Full-page result component
 * @param props - ResultPage configuration
 * @returns React result page element
 */
function ResultPage(props: ResultPageProps): JSX.Element;

interface ResultPageProps {
  /** Result status */
  status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
  /** Page title */
  title?: React.ReactNode;
  /** Page description */
  description?: React.ReactNode;
  /** Custom icon */
  icon?: React.ReactNode;
  /** Primary action button */
  primaryButtonText?: string;
  /** Primary button click handler */
  onPrimaryButtonClick?: () => void;
  /** Secondary action button */
  secondaryButtonText?: string;
  /** Secondary button click handler */
  onSecondaryButtonClick?: () => void;
  /** Additional content */
  children?: React.ReactNode;
} & NativeProps;

/**
 * Content divider component
 * @param props - Divider configuration
 * @returns React divider element
 */
function Divider(props: DividerProps): JSX.Element;

interface DividerProps {
  /** Divider content alignment */
  contentPosition?: 'left' | 'center' | 'right';
  /** Divider direction */
  direction?: 'horizontal' | 'vertical';
  /** Divider content */
  children?: React.ReactNode;
} & NativeProps<'--border-color' | '--border-style' | '--border-width' | '--text-color'>;

/**
 * Notice banner component
 * @param props - NoticeBar configuration
 * @returns React notice bar element
 */
function NoticeBar(props: NoticeBarProps): JSX.Element;

interface NoticeBarProps {
  /** Notice content */
  content: React.ReactNode;
  /** Notice color theme */
  color?: 'default' | 'alert' | 'error' | 'info';
  /** Whether content should scroll */
  wrap?: boolean;
  /** Left icon */
  icon?: React.ReactNode;
  /** Whether to show close button */
  closeable?: boolean;
  /** Close button click handler */
  onClose?: () => void;
  /** Extra content on the right */
  extra?: React.ReactNode;
} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--icon-font-size'>;

/**
 * Loading skeleton component
 * @param props - Skeleton configuration
 * @returns React skeleton element
 */
function Skeleton(props: SkeletonProps): JSX.Element;

interface SkeletonProps {
  /** Whether skeleton is animated */
  animated?: boolean;
  /** Number of skeleton lines */
  rows?: number;
  /** Line widths (array or single value) */
  lineWidths?: (string | number)[] | string | number;
  /** Line height */
  lineHeight?: string | number;
  /** Custom skeleton title */
  title?: boolean | SkeletonTitleProps;
  /** Skeleton content */
  children?: React.ReactNode;
} & NativeProps;

interface SkeletonTitleProps {
  /** Title width */
  width?: string | number;
}

/**
 * Watermark overlay component
 * @param props - WaterMark configuration
 * @returns React watermark element
 */
function WaterMark(props: WaterMarkProps): JSX.Element;

interface WaterMarkProps {
  /** Watermark content (text or image) */
  content?: string | string[];
  /** Text color */
  fontColor?: string;
  /** Font size */
  fontSize?: string | number;
  /** Gap between watermarks */
  gapX?: number;
  /** Gap between watermarks */
  gapY?: number;
  /** Image source for image watermark */
  image?: string;
  /** Image height */
  imageHeight?: number;
  /** Image width */
  imageWidth?: number;
  /** Rotation angle */
  rotate?: number;
  /** Z-index */
  zIndex?: number;
  /** Content to watermark */
  children: React.ReactNode;
} & NativeProps;

import { 
  Card, 
  List, 
  Avatar, 
  Badge, 
  Tag, 
  Empty, 
  Result 
} from "antd-mobile";

function DisplayExample() {
  return (
    <div>
      {/* Card with content */}
      <Card
        title="User Profile"
        extra={<Tag color="primary">VIP</Tag>}
      >
        <List>
          <List.Item
            prefix={<Avatar src="/avatar.jpg">JD</Avatar>}
            description="Active 2 hours ago"
          >
            <Badge content="5" color="danger">
              John Doe
            </Badge>
          </List.Item>
        </List>
      </Card>

      {/* Empty state */}
      <Empty description="No messages yet">
        <Button color="primary">Send First Message</Button>
      </Empty>

      {/* Result display */}
      <Result
        status="success"
        title="Payment Successful"
        description="Your order has been confirmed"
      >
        <Button block color="primary">Continue Shopping</Button>
      </Result>
    </div>
  );
}