import { type AvatarProps } from '@design-system/Avatar/types';
import { type CardContainerProps } from '@design-system/CardContainer';
import { type TitleProps } from '@design-system/Title/types';
import { type LoadingButtonProps } from '@mui/lab';
import { type Button, type StackProps, type SxProps } from '@mui/material';
import { type TablerIcon } from '@tabler/icons-react';

export type StateCardVariant =
  | 'primary'
  | 'success'
  | 'error'
  | 'warning'
  | 'wifi-off';

/** @deprecated Kept for backward compatibility. Action now extends LoadingButtonProps directly. */
export type ButtonProps = React.ComponentProps<typeof Button>;

export type Action = Omit<LoadingButtonProps, 'children'> & {
  /** Label text rendered on the button */
  label: React.ReactNode;
};

export type StateCardProps = {
  /** Custom styles applied to the root element */
  sx?: SxProps;
  /** Main heading text of the state card */
  title: string;
  /** Descriptive content displayed below the title */
  description: React.ReactNode;
  /**
   * Primary call-to-action button.
   * Accepts any LoadingButton prop (e.g. `loading`, `disabled`, `startIcon`, `variant`, `sx`, ...).
   */
  primaryAction?: Action;
  /**
   * Secondary call-to-action button.
   * Accepts any LoadingButton prop (e.g. `loading`, `disabled`, `startIcon`, `variant`, `sx`, ...).
   */
  secondaryAction?: Action;
  /** Visual theme variant of the card */
  variant?: StateCardVariant;
  /** Icon rendered above the title */
  icon?: TablerIcon;
  /** Props forwarded to inner slot components */
  slotProps?: {
    /** Props forwarded to the outer CardContainer */
    card?: CardContainerProps;
    /** Props forwarded to the inner Stack that lays out avatar/title/actions */
    container?: StackProps;
    /** Props forwarded to the Stack that wraps the action buttons */
    actionsContainer?: StackProps;
    /** Props forwarded to the Avatar */
    avatar?: Partial<AvatarProps>;
    /** Props forwarded to the Title */
    title?: Partial<TitleProps>;
  };
};
