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

import { Button, ButtonProps } from '../button';
import { forwardRef } from '../utils/react';
import * as css from './alert-button.css';

export interface AlertButtonProps extends ButtonProps {}

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

    return (
      <Button
        ref={ref}
        className={cn}
        variant="text"
        width="auto"
        color="inherit"
        {...rest}
      >
        {children}
      </Button>
    );
  },
);