import { MaterialSymbol, type MaterialSymbolProps } from './MaterialSymbol'

import { iconVariants } from '../variants'

import type { VariantProps } from 'class-variance-authority'
import { HTMLAttributes } from 'react'

export interface MaterialIconProps
  extends Pick<MaterialSymbolProps, 'size' | 'icon' | 'className' | 'style'>,
    Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'id'>,
    VariantProps<typeof iconVariants> {
  isFilled?: boolean
}
export type MaterialIconSetIconProps = Omit<MaterialIconProps, 'icon'>
export function MaterialIcon({
  color,
  size = 24,
  className,
  isFilled = false,
  ...props
}: MaterialIconProps) {
  const classNames = iconVariants({ className, color })
  const { role, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = props

  // Automatically decide whether to hide from assistive tech
  const computedAriaHidden =
    ariaHidden !== undefined ? ariaHidden : ariaLabel || role ? false : true

  return (
    // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
    <span>
      <MaterialSymbol
        className={classNames}
        data-testid="MaterialIcon"
        size={size}
        fill={isFilled}
        aria-hidden={computedAriaHidden}
        {...props}
      />
    </span>
  )
}