Layout Components

/**
 * Grid container component for CSS Grid layouts
 */
export function Grid(props: GridProps): JSX.Element;

/**
 * Grid row component for flexbox-based layouts
 */  
export function Row(props: RowProps): JSX.Element;

/**
 * Grid column component with responsive sizing
 */
export function Col(props: ColProps): JSX.Element;

/**
 * Grid item component for CSS Grid containers
 */
export function GridItem(props: GridItemProps): JSX.Element;

// Grid Types
interface GridProps {
  cols?: number | ResponsiveValue;
  rows?: number | ResponsiveValue;
  colGap?: number | string | ResponsiveValue;
  rowGap?: number | string | ResponsiveValue;
  collapsed?: boolean;
  collapsedRows?: number;
}

interface RowProps {
  gutter?: number | number[] | ResponsiveValue;
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
  align?: 'start' | 'end' | 'center' | 'stretch';
  wrap?: boolean;
  div?: boolean;
}

interface ColProps {
  span?: number;
  offset?: number;
  order?: number;
  xs?: number | { span?: number; offset?: number };
  sm?: number | { span?: number; offset?: number };
  md?: number | { span?: number; offset?: number };
  lg?: number | { span?: number; offset?: number };
  xl?: number | { span?: number; offset?: number };
  xxl?: number | { span?: number; offset?: number };
  flex?: string | number;
}

interface GridItemProps {
  offset?: number | ResponsiveValue;
  span?: number | ResponsiveValue;
  suffix?: boolean;
}

type ResponsiveValue = {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
};

<template>
  <!-- Basic 24-column grid -->
  <a-row :gutter="16">
    <a-col :span="8">Column 1</a-col>
    <a-col :span="8">Column 2</a-col>
    <a-col :span="8">Column 3</a-col>
  </a-row>

  <!-- Responsive grid -->
  <a-row>
    <a-col :xs="24" :sm="12" :md="8" :lg="6">
      Responsive column
    </a-col>
  </a-row>

  <!-- CSS Grid layout -->
  <a-grid :cols="3" :col-gap="16" :row-gap="16">
    <a-grid-item>Item 1</a-grid-item>
    <a-grid-item :span="2">Item 2 (spans 2 columns)</a-grid-item>
    <a-grid-item>Item 3</a-grid-item>
  </a-grid>
</template>

/**
 * Main layout container component
 */
export function Layout(props: LayoutProps): JSX.Element;

/**
 * Layout header component
 */
export function LayoutHeader(): JSX.Element;

/**
 * Layout content area component
 */
export function LayoutContent(): JSX.Element;

/**
 * Layout footer component  
 */
export function LayoutFooter(): JSX.Element;

/**
 * Layout sidebar component with collapsible functionality
 */
export function LayoutSider(props: SiderProps): JSX.Element;

// Layout Types
interface LayoutProps {
  class?: string;
  style?: CSSProperties;
  hasSider?: boolean;
}

interface SiderProps {
  theme?: 'light' | 'dark';
  collapsed?: boolean;
  collapsible?: boolean;
  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
  collapsedWidth?: number;
  width?: number | string;
  trigger?: string | null;
  reverseArrow?: boolean;
  onCollapse?: (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;
  onBreakpoint?: (broken: boolean) => void;
}

<template>
  <!-- Basic layout -->
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>Content</a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>

  <!-- Layout with sidebar -->
  <a-layout>
    <a-layout-sider 
      :width="200"
      collapsible
      v-model:collapsed="collapsed"
    >
      Sidebar
    </a-layout-sider>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
    </a-layout>
  </a-layout>
</template>

/**
 * Space component for consistent spacing between child elements
 */
export function Space(props: SpaceProps): JSX.Element;

/**
 * Divider component for visual content separation
 */
export function Divider(props: DividerProps): JSX.Element;

// Space Types
interface SpaceProps {
  align?: 'start' | 'end' | 'center' | 'baseline';
  direction?: 'vertical' | 'horizontal';
  size?: Size | number | [number, number];
  wrap?: boolean;
  fill?: boolean;
}

// Divider Types  
interface DividerProps {
  type?: 'horizontal' | 'vertical';
  orientation?: 'left' | 'center' | 'right';
  orientationMargin?: string | number;
  dashed?: boolean;
  margin?: string | number;
}

<template>
  <!-- Horizontal spacing -->
  <a-space>
    <a-button>Button 1</a-button>
    <a-button>Button 2</a-button>
    <a-button>Button 3</a-button>
  </a-space>

  <!-- Vertical spacing with custom size -->
  <a-space direction="vertical" size="large">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </a-space>

  <!-- Content dividers -->
  <div>
    <p>Section 1</p>
    <a-divider />
    <p>Section 2</p>
    <a-divider orientation="left">Left Title</a-divider>
    <p>Section 3</p>
  </div>
</template>

// Instance types for template refs
export type GridInstance = InstanceType<typeof Grid>;
export type GridRowInstance = InstanceType<typeof Row>;
export type GridColInstance = InstanceType<typeof Col>;
export type GridItemInstance = InstanceType<typeof GridItem>;
export type LayoutInstance = InstanceType<typeof Layout>;
export type LayoutHeaderInstance = InstanceType<typeof LayoutHeader>;
export type LayoutContentInstance = InstanceType<typeof LayoutContent>;
export type LayoutFooterInstance = InstanceType<typeof LayoutFooter>;
export type LayoutSiderInstance = InstanceType<typeof LayoutSider>;
export type SpaceInstance = InstanceType<typeof Space>;