import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
import type { MergeOmitting } from '@/types/helpers'
import '@/components/ui/button.css'

export type ButtonProps = MergeOmitting<
  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
  {
    neutral?: boolean
    icon?: boolean
  }
>

const Button: FC<ButtonProps> = ({
  children,
  className,
  neutral,
  icon,
  ...buttonProps
}) => {
  return (
    <button
      className={`st-rnd-button${neutral === true ? ' button-neutral' : ''}${icon === true ? ' button-icon' : ''}${
        className ? ` ${className}` : ''
      }`}
      {...buttonProps}
    >
      {children}
    </button>
  )
}

export default Button