import React from 'react';

interface IconProps extends Omit<JSX.IntrinsicElements['svg'], 'ara-hidden'> {
  children: React.ReactNode;
}

export function Icon({ children, 'aria-label': ariaLabel, ...props }: IconProps) {
  const child = React.Children.only(children);

  return (
    <>
      {React.cloneElement(child as React.ReactElement, {
        'aria-hidden': 'true',
        'aria-label': undefined,
        focusable: 'false',
        ...props,
      })}
      {ariaLabel ? <span className="sr-only">{ariaLabel}</span> : null}
    </>
  );
}