import type { ComponentType, SVGProps } from "react";

import {
  CloseGlyph,
  ErrorGlyph,
  InfoGlyph,
  MenuGlyph,
  NextGlyph,
  PreviousGlyph,
  SearchGlyph,
  SuccessGlyph,
  WarningGlyph,
} from "./vendors/lucide.js";

export type SemanticIconProps = Readonly<{
  label?: string;
  size?: "small" | "medium" | "large";
}>;

function createSemanticIcon(
  Glyph: ComponentType<SVGProps<SVGSVGElement>>,
) {
  return function SemanticIcon({
    label,
    size = "medium",
  }: SemanticIconProps) {
    return (
      <Glyph
        aria-hidden={label ? undefined : "true"}
        aria-label={label}
        className={`ui-icon ui-icon--${size}`}
        focusable="false"
        role={label ? "img" : undefined}
      />
    );
  };
}

export const MenuIcon = createSemanticIcon(MenuGlyph);
export const CloseIcon = createSemanticIcon(CloseGlyph);
export const WarningIcon = createSemanticIcon(WarningGlyph);
export const SuccessIcon = createSemanticIcon(SuccessGlyph);
export const ErrorIcon = createSemanticIcon(ErrorGlyph);
export const InfoIcon = createSemanticIcon(InfoGlyph);
export const SearchIcon = createSemanticIcon(SearchGlyph);
export const PreviousIcon = createSemanticIcon(PreviousGlyph);
export const NextIcon = createSemanticIcon(NextGlyph);