import * as React from 'react';

/**
 * Shared chassis for every icon in the kit.
 *
 * The geometry is drawn on a 24×24 grid with a 2px `currentColor` stroke, so an
 * icon inherits its colour from the surrounding text and lines up with the rest
 * of the set at any size. Controls size their own icons through the
 * `iconSizing` preset (`src/lib/cva-presets.ts`), which is why callers inside
 * the kit pass `className="size-4"` rather than the `size` prop.
 */

export interface IconProps extends React.SVGProps<SVGSVGElement> {
  /**
   * Pixel size applied to both dimensions. A `size-*` utility on `className`
   * overrides it, since a class beats the presentational attribute.
   */
  size?: number | string;
}

/**
 * An icon is decorative unless the caller says otherwise: next to a visible
 * label it would otherwise be announced twice. Passing `aria-label`, `role` or
 * `title` marks it as meaningful and opts it back into the accessibility tree.
 */
const isDecorative = (props: Record<string, unknown>) =>
  !Object.keys(props).some(
    (prop) => prop.startsWith('aria-') || prop === 'role' || prop === 'title'
  );

export interface IconBaseProps extends IconProps {
  children: React.ReactNode;
}

export function Icon({ size = 24, className, children, ...props }: IconBaseProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      data-slot="icon"
      className={className}
      {...(isDecorative(props) ? { 'aria-hidden': true } : null)}
      {...props}
    >
      {children}
    </svg>
  );
}