import { ReactNode } from 'react';
import type {
  PrimitiveButtonProps,
  PrimitiveAnchorProps,
  PrimitiveButtonElementRef,
  PrimitiveAnchorElementRef,
} from '../../../primitives';
import type { SingleAvatarType } from '../../../avatarLayout';

export type ButtonApperance = 'default' | 'negative';
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
export type ButtonType = 'button' | 'submit' | 'reset' | undefined;
export type ButtonSize = 'sm' | 'md' | 'lg';
export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
export type ButtonIconSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;

/**
 * Common properties for the Button component.
 */
export interface CommonButtonProps {
  /** The HTML element to render */
  as?: 'button' | 'a' | undefined;

  /** Additional class name(s) to apply to the button */
  className?: string;

  /** Content to be displayed inside the button */
  children?: ReactNode;

  /** Whether the button is disabled */
  disabled?: boolean;

  /** Whether the button is in a loading state */
  loading?: boolean;

  /** Whether the button should take up the full width of its container */
  block?: boolean;

  /** Size of the button */
  size?: ButtonSize | ButtonIconSize;

  /**
   * Priority of the button
   * @default 'primary'
   */
  priority?: ButtonPriority;

  /**
   * Appearance of the button
   * @default 'default'
   */
  appearance?: ButtonApperance;

  /** Icon to be displayed on the left side of the button */
  iconLeft?: string;

  /** Icon to be displayed on the right side of the button */
  iconRight?: string;

  iconOnly?: string;

  /** Media to be displayed on the left side of the button */
  avatars?: SingleAvatarType[];

  /** Optional property to provide component Ref */
  ref?: ButtonRefType;
}

export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
export type ButtonProps = ButtonElementProps | AnchorElementProps;
