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

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './alert.css';

export interface AlertProps extends css.AlertVariants {
  action?: React.ReactNode;
}

export const Alert = forwardRef<'div', AlertProps>(function Alert(
  { className, status, children, action, ...rest },
  ref,
) {
  const cn = clsx(className, css.alert({ status }));

  return (
    <Box ref={ref} className={cn} {...rest}>
      <span className={css.alertMessage}>{children}</span>
      {action}
    </Box>
  );
});