import { ButtonHTMLAttributes, forwardRef } from 'react';
import { twx } from '../utils';

export type ButtonInputProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  loading?: boolean;
  icon?: string;
  rightIcon?: string;
  iconClass?: string;
};

export const Button = forwardRef<HTMLButtonElement, ButtonInputProps>(
  function CButton(
    {
      children,
      className,
      // loading,
      disabled,
      icon,
      rightIcon,
      iconClass,
      ...props
    },
    ref,
  ) {
    return (
      <button
        ref={ref}
        className={twx([
          'flex justify-center items-center bg-red-5 dark:text-white rounded px-2 py-1 gap-1 hover:!brightness-110 border text-black/90 dark:border-zinc-600',
          icon && 'pl-1.5',
          rightIcon && 'pr-1.5',
          className,
          disabled && 'bg-gray-500 ',
        ])}
        disabled={disabled}
        {...props}
      >
        <div className={twx([icon, 'text-lg', iconClass])} />
        <div className="flex items-center gap-1"> {children}</div>
        <div className={twx([rightIcon, 'text-lg'])} />
      </button>
    );
  },
);
