/**
 * @file Icon.tsx - Bootstrap icon wrapper component.
 */

import * as icons from 'react-bootstrap-icons';

/**
 * Type representing valid Bootstrap icon names.
 * These correspond to the exported icon components from react-bootstrap-icons.
 *
 * @example
 * 'Plus', 'Trash', 'PencilSquare', 'ArrowClockwise'
 */
export type IconName = keyof typeof icons;

/**
 * Props for the Icon component.
 * Extends the base IconProps from react-bootstrap-icons.
 */
interface IconProps extends icons.IconProps {
  /**
   * Name of the Bootstrap icon to render (in PascalCase).
   * Note: Cannot use "name" as it's a reserved SVG attribute.
   *
   * @example 'Plus', 'Trash', 'PencilSquare'
   *
   * @see https://icons.getbootstrap.com/
   */
  iconName: IconName;
}

/**
 * A wrapper component for Bootstrap icons from react-bootstrap-icons.
 *
 * Provides a simple way to render any Bootstrap icon by name,
 * with full support for all icon props (size, color, className, etc.).
 *
 * @example
 * ```tsx
 * // Basic usage
 * <Icon iconName="Plus" />
 *
 * // With size and color
 * <Icon iconName="Trash" size={24} color="red" />
 *
 * // With className
 * <Icon iconName="PencilSquare" className="me-2" />
 * ```
 *
 * @see https://icons.getbootstrap.com/ for available icons
 */
export const Icon = ({ iconName, ...props }: IconProps) => {
  const BootstrapIcon = icons[iconName];
  return <BootstrapIcon {...props} />;
};
