import React from 'react';

/**
 * v0.2.6 #24+#41 — 4 banner 의 inline style 중복 제거. severity 별 theme map.
 */
const THEMES = {
  warning: { bg: '#fff7e6', border: '#d99500', text: '#946100' },
  error: { bg: '#fce4e4', border: '#a33', text: '#a33' },
  info: { bg: '#e8f0fe', border: '#4a7ec0', text: '#234' }
} as const;

interface Props {
  severity: 'warning' | 'error' | 'info';
  children: React.ReactNode;
}

export function Banner({ severity, children }: Props): React.ReactElement {
  const t = THEMES[severity];
  return (
    <div style={{
      background: t.bg, border: `1px solid ${t.border}`, color: t.text,
      borderRadius: 6, padding: '8px 12px', margin: '8px 0', fontSize: 13
    }}>
      {children}
    </div>
  );
}
