import { forwardRef, type ComponentPropsWithoutRef } from 'react';
import { cx } from '../utils';

export type BtnVariant = 'key' | 'primary' | 'ember' | 'ghost';

type ButtonProps = ComponentPropsWithoutRef<'button'> & {
  variant?: BtnVariant;
  size?: 'sm';
  iconOnly?: boolean;
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
    <button
      ref={ref}
      className={cx(
        'mta-btn',
        variant !== 'key' && `mta-btn--${variant}`,
        size === 'sm' && 'mta-btn--sm',
        iconOnly && 'mta-btn--icon',
        className,
      )}
      {...props}
    />
  ),
);
Button.displayName = 'Button';
