"use client";

import * as React from "react";
import type { LucideIcon, LucideProps } from "lucide-react";
import { cn } from "../../lib/utils";

/**
 * The ui/* replacement for `@wordpress/components`' `<Icon>`.
 *
 * WP's renderer took a `@wordpress/icons` SVG object and drew it. This one takes a lucide
 * component instead, so the call sites keep their shape: `<Icon icon={X} size={24} />`.
 *
 * Colour comes from `currentColor`. Set it with a semantic token class, not a hex value.
 *
 * Decorative by default - lucide already writes `aria-hidden` when an icon has no accessible
 * name, so this does not restate it. Pass `label` for an icon that carries meaning on its own.
 */
export interface IconProps extends Omit<LucideProps, "ref"> {
  /** A lucide component, e.g. `Calendar`. */
  icon: LucideIcon;
  /** Square edge in px. WP defaulted to 24, so this does too. */
  size?: number;
  /** Accessible name. Omit for a decorative icon sitting next to its own text. */
  label?: string;
}

export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
  ({ icon: Glyph, size = 24, className, label, ...props }, ref) => (
    <Glyph
      ref={ref}
      size={size}
      className={cn(className)}
      {...(label ? { role: "img", "aria-label": label } : {})}
      {...props}
    />
  ),
);

Icon.displayName = "Icon";

export default Icon;