import React from 'react';

declare module 'host/UIKit' {
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
    size?: 'sm' | 'md' | 'lg';
  }
  export const Button: React.FC<ButtonProps>;

  export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    icon?: React.ReactNode;
    error?: string;
  }
  export const Input: React.FC<InputProps>;

  export interface CardProps {
    title?: React.ReactNode;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
  }
  export const Card: React.FC<CardProps>;

  export const Typography: {
    H1: React.FC<{ children: React.ReactNode; className?: string }>;
    H2: React.FC<{ children: React.ReactNode; className?: string }>;
    H3: React.FC<{ children: React.ReactNode; className?: string }>;
    P: React.FC<{ children: React.ReactNode; className?: string }>;
    Small: React.FC<{ children: React.ReactNode; className?: string; style?: React.CSSProperties }>;
  };

  export const Modal: React.FC<{
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    children: React.ReactNode;
    width?: string;
  }>;

  export const Tabs: React.FC<{
    tabs: { id: string; label: React.ReactNode; icon?: React.ReactNode }[];
    activeTab: string;
    onChange: (id: string) => void;
    className?: string;
  }>;

  export const Table: React.FC<{
    headers: React.ReactNode[];
    children: React.ReactNode;
    className?: string;
  }>;

  export const SearchableSelect: React.FC<{
    options: { value: string | number; label: string }[];
    value: string | number;
    onChange: (value: any) => void;
    placeholder?: string;
    style?: React.CSSProperties;
    language?: string;
  }>;

  export const MultiSelect: React.FC<{
    options: { value: string | number; label: string }[];
    values: (string | number)[];
    onChange: (values: (string | number)[]) => void;
    placeholder?: string;
    style?: React.CSSProperties;
    language?: string;
  }>;

  export interface DatePickerProps {
    label?: string;
    mode?: 'single' | 'range';
    value?: string | { from?: string; to?: string };
    onChange?: (value: any) => void;
    placeholder?: string;
    language?: string;
    error?: string;
    icon?: React.ReactNode;
  }
  export const DatePicker: React.FC<DatePickerProps>;
}