import type { Ref, SVGAttributes } from 'react'
import React, { forwardRef } from 'react'

import type { RenderFunction } from './renderFunction'
import type { IconOptions } from './Icon'

export type IconBaseProps = IconBaseOptions & SVGAttributes<SVGSVGElement>

export const IconBase = forwardRef(
  (props: IconBaseProps, ref: Ref<SVGSVGElement>) => {
    const {
      width = '1.25rem',
      height = '1.25rem',
      weight = 'outline',
      mirrored = false,
      title,
      children,
      renderPath,
      ...htmlProps
    } = props

    return (
      <svg
        ref={ref}
        xmlns="http://www.w3.org/2000/svg"
        width={width}
        height={height}
        fill="currentColor"
        viewBox="0 0 256 256"
        transform={mirrored ? 'scale(-1, 1)' : undefined}
        {...htmlProps}
      >
        {title ? <title>{title}</title> : null}
        <rect width="16rem" height="16rem" fill="none" />
        {children}
        {renderPath(weight, 'currentColor')}
      </svg>
    )
  }
)

export interface IconBaseOptions extends IconOptions {
  renderPath: RenderFunction
  height?: string | number | undefined
  width?: string | number | undefined
}