import type { ComponentType, ReactNode } from 'react';

export type WidgetFeatureKey =
  | 'api-sample'
  | 'docs'
  | 'component-sample'
  | 'imperative-handle'
  | 'feature-registry';

export type WidgetFeatureDefinition = {
  key: WidgetFeatureKey;
  label: string;
  description: string;
};

export type WidgetRegistryItem = {
  id: string;
  title: string;
  description: string;
  features: WidgetFeatureKey[];
};

export type WidgetHandle = {
  focus: () => void;
  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
  getId: () => string;
  getFeatures: () => WidgetFeatureKey[];
};

export type WidgetShellProps = {
  id: string;
  title: ReactNode;
  features?: WidgetFeatureKey[];
  featureSlot?: ReactNode;
  cardWrapper?: boolean;
  children: ReactNode;
};

export type SampleRenderProps = {
  disableWidgetCardWrapper?: boolean;
};

export type SampleMeta = {
  id: string;
  componentId: string;
  title: string;
  description: string;
  category: string;
  kind?: 'base' | 'plugin' | 'feature';
  variantLabel?: string;
  order?: number;
  features?: WidgetFeatureKey[];
};

export type SampleModule = {
  Sample: ComponentType<SampleRenderProps>;
  sampleMeta: SampleMeta;
};
