import type { AnimatedCardProps } from '@/components/ui/animated-card';
import type { SearchInputProps } from '@/components/ui/search-input';
import type { StatusBadgeProps } from '@/components/ui/status-badge';

interface AnimatedCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Animation style of the card */
  variant?: 'hover' | 'gradient' | 'glow';
  /** Animation duration in milliseconds */
  duration?: number;
}

interface SearchInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Callback when search value changes */
  onSearch?: (value: string) => void;
  /** Callback when input is cleared */
  onClear?: () => void;
}

type Status = 'online' | 'offline' | 'busy' | 'away';

interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** The status to display */
  status: Status;
  /** Whether to show pulse animation for online status */
  pulse?: boolean;
}

interface CopyButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Text to copy to clipboard */
  text: string;
  /** Callback after text is copied */
  onCopy?: () => void;
}

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbNavProps extends React.HTMLAttributes<HTMLElement> {
  /** Array of breadcrumb items */
  items: BreadcrumbItem[];
  /** Custom separator element */
  separator?: React.ReactNode;
}

interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Icon to display */
  icon?: React.ReactNode;
  /** Title text */
  title: string;
  /** Description text */
  description?: string;
  /** Action button or element */
  action?: React.ReactNode;
}

interface Column<T> {
  key: keyof T;
  header: string;
  sortable?: boolean;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

interface DataTableProProps<T> {
  /** Array of data to display */
  data: T[];
  /** Column definitions */
  columns: Column<T>[];
  /** Enable pagination */
  pagination?: boolean;
  /** Enable column sorting */
  sorting?: boolean;
  /** Enable filtering */
  filtering?: boolean;
  /** Rows per page options */
  pageSizeOptions?: number[];
}

interface Step {
  id: string;
  title: string;
  description?: string;
  fields: FormField[];
}

interface FormField {
  name: string;
  label: string;
  type: 'text' | 'email' | 'select' | 'textarea';
  required?: boolean;
  options?: { label: string; value: string }[];
}

interface MultiStepFormProps {
  /** Array of form steps */
  steps: Step[];
  /** Callback when form is completed */
  onComplete: (data: Record<string, unknown>) => void;
  /** Initial step index */
  initialStep?: number;
}

interface KanbanCard {
  id: string;
  title: string;
  description?: string;
  labels?: string[];
}

interface KanbanColumn {
  id: string;
  title: string;
  cards: KanbanCard[];
}

interface DropResult {
  cardId: string;
  sourceColumnId: string;
  destinationColumnId: string;
  sourceIndex: number;
  destinationIndex: number;
}

interface KanbanBoardProps {
  /** Array of kanban columns */
  columns: KanbanColumn[];
  /** Callback when card is dragged */
  onDragEnd: (result: DropResult) => void;
  /** Callback to add new card */
  onAddCard?: (columnId: string) => void;
}

// DataTablePro with typed data
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

<DataTablePro<User>
  data={users}
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    { key: 'role', header: 'Role' },
  ]}
/>