import type { ReactNode } from 'react';

type Variant = 'info' | 'warning' | 'error' | 'empty';

const variantClasses: Record<Variant, string> = {
  info: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
  warning: 'border-amber-500/20 bg-amber-500/10 text-amber-300',
  error: 'border-red-500/20 bg-red-500/10 text-red-400',
  empty: 'border-white/[0.06] bg-white/[0.02] text-gray-400 py-8 text-center',
};

interface CalloutProps {
  variant?: Variant;
  children: ReactNode;
  onRetry?: () => void;
}

/** Standard inline message box for info banners, errors, and empty states. */
export function Callout({ variant = 'info', children, onRetry }: CalloutProps) {
  return (
    <div className={`rounded-xl border px-4 py-3 text-sm ${variantClasses[variant]}`}>
      {children}
      {onRetry && (
        <button
          onClick={onRetry}
          className="mt-2 block text-xs font-medium underline opacity-80 hover:opacity-100"
        >
          Retry
        </button>
      )}
    </div>
  );
}
