'use client';

import type { ReactNode } from 'react';

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

const tagMap: Record<string, string> = {
  note: 'NOTE',
  tip: 'TIP',
  warning: 'WARNING',
  danger: '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">
      <div className="callout-title">
        <span className="text-[11px] font-mono tracking-[0.16em]">
          {tagMap[type] || tagMap.note}
        </span>
        {title && (
          <span>{title}</span>
        )}
      </div>
      <div className="callout-content">{children}</div>
    </div>
  );
}
