import { clsx } from 'clsx';
import React from 'react';

import { IconButton, IconButtonProps } from '../icon-button';
import { forwardRef } from '../utils/react';
import * as css from './alert-icon-button.css';

export interface AlertIconButtonProps extends IconButtonProps {}

export const AlertIconButton = forwardRef<'button', AlertIconButtonProps>(
  function AlertIconButton({ className, children, ...rest }, ref) {
    const cn = clsx(className, css.button);

    return (
      <IconButton ref={ref} className={cn} {...rest}>
        {children}
      </IconButton>
    );
  },
);