import { ComponentPropsWithRef, forwardRef } from 'react';
import { cva, VariantProps } from 'class-variance-authority';

import './icon-button.css';

type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
const buttonStyles = cva(['c-icon-button'], {
  variants: {
    variant: {
      default: '',
      elevate: 'c-icon-button-elevate',
    },
    size: {
      xxs: 'c-icon-button-xxs',
      xs: 'c-icon-button-xs',
      sm: 'c-icon-button-sm',
      md: 'c-icon-button-md',
      lg: 'c-icon-button-lg',
    },
  },
  defaultVariants: {
    size: 'sm',
    variant: 'default',
  },
});

export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;

export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ children, className, type = 'button', size, variant, ...delegated }, ref) => {
    return (
      <button ref={ref} type={type} className={buttonStyles({ size, variant, className })} {...delegated}>
        {children}
      </button>
    );
  },
);

IconButton.displayName = 'Button';
