import styles from './InfoCallout.module.css'
import type { ReactNode } from 'react'

type InfoCalloutVariant = 'amber' | 'success' | 'warning' | 'error' | 'info'

interface InfoCalloutProps {
  children: ReactNode
  variant?: InfoCalloutVariant
  title?: string
  className?: string
}

export function InfoCallout({
  children,
  variant = 'amber',
  title,
  className,
}: InfoCalloutProps) {
  return (
    <div className={`${styles.callout} ${styles[variant]} ${className ?? ''}`}>
      {title && <div className={styles.title}>{title}</div>}
      <div className={styles.body}>{children}</div>
    </div>
  )
}
