import React, { ReactNode } from 'react'

type Props = {
  path: string
  w?: string
  h?: string
  fill?: string;
  size?: string | number | null
  className?: string
  children?: ReactNode
}

export default function BaseIcon({
  path,
  fill,
  w = 'w-6',
  h = 'h-6',
  size = null,
  className = '',
  children,
}: Props) {
  const iconSize = size ?? 16

  return (
    <span className={`inline-flex justify-center items-center ${w} ${h} ${className}`}>
      <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} className="inline-block">
        <path fill={fill || 'currentColor'} d={path} />
      </svg>
      {children}
    </span>
  )
}