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('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
    {icon && <span className="modern-sk-callout__icon">{icon}</span>}
    <div className="modern-sk-callout__body">{children}</div>
  </div>
);