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

import { iconVariants } from "../variants"

import type { VariantProps } from "class-variance-authority"
import { HTMLAttributes } from "react"
import { getIconAriaProps } from "../utils"

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 ariaProps = getIconAriaProps(props)

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