import type {
  ComponentType,
  ForwardRefExoticComponent,
  ImgHTMLAttributes,
  RefAttributes,
} from "react";

/**
 * Props passed to the custom image component when using the `as` prop.
 * Covers native img attributes plus optional Next.js Image props (fill, sizes, priority, etc.).
 */
export interface ImageComponentProps
  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
  /** Image source URL */
  src: string;
  /** Alt text (required for accessibility; use "" for decorative images) */
  alt: string;
  /** Optional; used by Next.js Image when using fill layout */
  fill?: boolean;
  /** Optional; used by Next.js Image for responsive sizes */
  sizes?: string;
  /** Optional; used by Next.js Image for priority loading */
  priority?: boolean;
  /** Optional; used by Next.js Image for blur placeholder */
  placeholder?: "blur" | "empty";
  /** Optional; used by Next.js Image for quality (1–100) */
  quality?: number;
}

/** Type for custom image component that supports ref forwarding */
type ImageComponent =
  | ComponentType<ImageComponentProps>
  | ForwardRefExoticComponent<
      ImageComponentProps & RefAttributes<HTMLImageElement>
    >;

export interface ImageProps extends ImageComponentProps {
  /** Custom component to render instead of native img (e.g. next/image) */
  as?: ImageComponent;
}