'use client';

import type { ReactNode } from 'react';

interface CalloutProps {
  type?: 'note' | 'tip' | 'warning' | 'danger';
  title?: string;
  children: ReactNode;
}

const iconMap: Record<string, string> = {
  note: 'ℹ️',
  tip: '💡',
  warning: '⚠️',
  danger: '🚫',
};

const typeClasses: Record<string, string> = {
  note: 'callout-note',
  tip: 'callout-tip',
  warning: 'callout-warning',
  danger: 'callout-danger',
};

export function Callout({ type = 'note', title, children }: CalloutProps) {
  const className = `callout ${typeClasses[type] || typeClasses.note}`;

  return (
    <div className={className} role="note">
      {title && (
        <div className="callout-title">
          <span className="callout-icon">{iconMap[type] || iconMap.note}</span>
          <span>{title}</span>
        </div>
      )}
      <div className="callout-content">{children}</div>
    </div>
  );
}