import { ClassValue, SlotProps, StyledComponentProps, ThemeColor } from "../../types/shared.js";
import { AlertSlots, AlertVariant } from "./alert-variants.js";

//#region src/components/alert/types.d.ts

/**
 * Props for the alert description component.
 * Displays supplementary text or details below the alert title.
 */
type AlertDescriptionProps = StyledComponentProps<React.ComponentProps<'div'>>;
/**
 * Props for the alert root/wrapper component.
 * Serves as the main container for the alert with color and variant styling.
 */
interface AlertRootProps extends StyledComponentProps<React.ComponentProps<'div'>> {
  /**
   * The color theme of the alert (e.g., primary, secondary, destructive, etc.).
   */
  color?: ThemeColor;
  /**
   * The visual variant style of the alert (e.g., solid, outline, subtle).
   */
  variant?: AlertVariant;
}
/**
 * Props for the alert title component.
 * Displays the main heading or primary message of the alert.
 */
type AlertTitleProps = StyledComponentProps<React.ComponentProps<'div'>>;
/**
 * Props for the alert wrapper component.
 * Contains the overall alert element structure.
 */
type AlertWrapperProps = StyledComponentProps<React.ComponentProps<'div'>>;
/**
 * Props for the alert icon component.
 * Displays an icon or visual indicator for the alert type.
 */
type AlertIconProps = StyledComponentProps<React.ComponentProps<'div'>> & {
  /**
   * The color theme of the icon (can differ from the alert color).
   */
  color?: ThemeColor;
};
/**
 * Props for the alert close button component.
 * Renders a button to dismiss or close the alert.
 */
type AlertCloseProps = StyledComponentProps<React.ComponentProps<'button'>>;
/**
 * Class names for different slots in the alert component.
 * Allows customizing styles for specific parts of the alert.
 */
type AlertClassNames = Partial<Record<AlertSlots, ClassValue>>;
/**
 * Props for the main Alert component.
 * Combines root styling props with optional icon, title, and description content.
 *
 * @example
 * ```jsx
 * <Alert
 *   color="info"
 *   variant="solid"
 *   icon={<InfoIcon />}
 *   title="Information"
 *   description="This is an informational alert message."
 * />
 * ```
 */
interface AlertProps extends Omit<AlertRootProps, 'title'>, SlotProps {
  /**
   * Class names for customizing different parts of the alert.
   */
  classNames?: AlertClassNames;
  /**
   * Description text displayed below the title.
   */
  description?: React.ReactNode;
  /**
   * Icon or visual element displayed at the start of the alert.
   */
  icon?: React.ReactNode;
  /**
   * Title or heading text displayed in the alert.
   */
  title?: React.ReactNode;
}
//#endregion
export { AlertClassNames, AlertCloseProps, AlertDescriptionProps, AlertIconProps, AlertProps, AlertRootProps, AlertTitleProps, AlertWrapperProps };