import { type ReactNode } from 'react';
import { cx } from '../utils';

type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';

export const Callout = ({
  variant = 'info',
  icon,
  children,
}: {
  variant?: CalloutVariant;
  icon?: ReactNode;
  children: ReactNode;
}) => (
  <div className={cx('mta-callout', variant !== 'info' && `mta-callout--${variant}`)}>
    {icon && <span className="mta-callout__icon">{icon}</span>}
    <div className="mta-callout__body">{children}</div>
  </div>
);
