import React from 'react';

type BaseImgElementProps = Omit<
  React.ImgHTMLAttributes<HTMLImageElement>,
  'alt'
>;

/** Props for decorative images - alt text not needed or allowed */
export interface DecorativeImageProps {
  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
  decorative: true;
  /** Alt text - not needed when decorative */
  alt?: never;
}

/** Props for meaningful images - alt text is required */
export interface MeaningfulImageProps {
  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
  decorative?: false;
  /** Alt text - required for non-decorative images */
  alt: string;
}

/** Union type for all image accessibility configurations */
export type ImageAccessibilityProps =
  | DecorativeImageProps
  | MeaningfulImageProps;

export type ImgElementProps = BaseImgElementProps & ImageAccessibilityProps;

/**
 * Centralized image component with proper accessibility handling.
 * Provides consistent image rendering across the application with automatic
 * accessibility attributes based on the decorative flag.
 *
 * For non-decorative images, alt text is required to ensure accessibility.
 * For decorative images, alt text is automatically set to empty string.
 *
 * @example Basic image with required alt text
 * <ImgElement
 *   src="/path/to/image.jpg"
 *   alt="Description of the image"
 * />
 *
 * @example Decorative image (alt not required or allowed)
 * <ImgElement
 *   src="/path/to/decorative.jpg"
 *   decorative={true}
 * />
 *
 * @example Navigation icon
 * <ImgElement
 *   src="/icons/menu.svg"
 *   decorative={true}
 *   width={24}
 *   height={24}
 * />
 */
export const ImgElement: React.FC<ImgElementProps> = ({
  decorative = false,
  ...imgProps
}) => {
  const accessibilityProps = decorative
    ? {
        'aria-hidden': 'true' as const,
        alt: '',
        role: 'presentation' as const,
      }
    : {};

  return <img {...accessibilityProps} {...imgProps} />;
};
