'use client';
import { filterDOMProps } from '@react-aria/utils';
import React from 'react';
import { useSlotProps } from '@keystar/ui/slots';
import { maybeTokenByKey, css, tokenSchema, useStyleProps, classNames } from '@keystar/ui/style';
import { toDataAttributes } from '@keystar/ui/utils';

const Icon = props => {
  var _maybeTokenByKey;
  props = useSlotProps(props, 'icon');
  const {
    strokeScaling,
    size,
    color,
    ...otherProps
  } = props;
  const stroke = (_maybeTokenByKey = maybeTokenByKey('color.foreground', color)) !== null && _maybeTokenByKey !== void 0 ? _maybeTokenByKey : 'currentColor';
  const iconClassName = css({
    fill: 'none',
    stroke: 'var(--ksv-icon-stroke)',
    flexShrink: 0,
    height: tokenSchema.size.icon.regular,
    width: tokenSchema.size.icon.regular,
    '&[data-size=small]': {
      height: tokenSchema.size.icon.small,
      width: tokenSchema.size.icon.small
    },
    '&[data-size=medium]': {
      height: tokenSchema.size.icon.medium,
      width: tokenSchema.size.icon.medium
    },
    '&[data-size=large]': {
      height: tokenSchema.size.icon.large,
      width: tokenSchema.size.icon.large
    },
    // Maintain stroke width, no matter the size.
    // @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect#non-scaling-stroke
    '&[data-stroke-scaling=false] > *': {
      vectorEffect: 'non-scaling-stroke'
    }
  });
  const styleProps = useStyleProps(otherProps);
  const hasAriaLabel = 'aria-label' in props && !!props['aria-label'];
  return /*#__PURE__*/React.cloneElement(props.src, {
    ...toDataAttributes({
      strokeScaling,
      size
    }),
    ...filterDOMProps(otherProps, {
      labelable: true
    }),
    'aria-hidden': !hasAriaLabel,
    focusable: 'false',
    role: 'img',
    className: classNames(iconClassName, styleProps.className),
    style: {
      '--ksv-icon-stroke': stroke,
      ...styleProps.style
    }
  });
};

export { Icon };
