import type { SVGProps } from "react";
import { cn } from "./cn";
import { remixPaths, type IconName } from "./remix-paths";

export type { IconName };

/** A Remix icon drawn in the current text colour. Decorative unless given a label. */
export function Icon({ name, size = 16, label, className, ...rest }: { name: IconName; size?: number; label?: string } & SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill="currentColor"
      className={cn("shrink-0", className)}
      aria-hidden={label ? undefined : true}
      aria-label={label}
      role={label ? "img" : undefined}
      {...rest}
    >
      <path d={remixPaths[name]} />
    </svg>
  );
}