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

type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
  variant?: BtnVariant;
  size?: 'sm' | 'lg';
};

export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ variant = 'key', size, className, ...props }, ref) => (
    <button
      ref={ref}
      className={cx(
        'modern-sk-btn',
        'modern-sk-iconbtn',
        variant !== 'key' && `modern-sk-btn--${variant}`,
        size && `modern-sk-iconbtn--${size}`,
        className,
      )}
      {...props}
    />
  ),
);
IconButton.displayName = 'IconButton';