import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
import type { ReactNode } from 'react';
import styles from './Callout.module.css';

export function Callout({
  icon = 'info',
  title,
  children,
}: {
  icon?: ApprovedIconName;
  title: string;
  children: ReactNode;
}) {
  return (
    <aside className={styles.callout}>
      <Icon name={icon} size="lg" />
      <div>
        <strong>{title}</strong>
        <div>{children}</div>
      </div>
    </aside>
  );
}
