import React from 'react';
import { Section, Text } from '@react-email/components';
import { theme } from '../theme';

type Tone = 'success' | 'warning' | 'danger' | 'info' | 'brand';

interface StatusBannerProps {
  tone?: Tone;
  children: React.ReactNode;
}

const tones: Record<Tone, { bg: string; fg: string; border: string }> = {
  success: {
    bg: '#EEF6E8',
    fg: theme.colors.success,
    border: theme.colors.brand,
  },
  warning: {
    bg: '#FFF4E8',
    fg: theme.colors.accent,
    border: theme.colors.accent,
  },
  danger: {
    bg: '#FDECEA',
    fg: theme.colors.danger,
    border: theme.colors.danger,
  },
  info: {
    bg: '#EAF1F8',
    fg: theme.colors.info,
    border: theme.colors.info,
  },
  brand: {
    bg: '#F4F8E4',
    fg: theme.colors.forest,
    border: theme.colors.brand,
  },
};

export const StatusBanner = ({ tone = 'brand', children }: StatusBannerProps) => {
  const t = tones[tone];
  return (
    <Section
      style={{
        backgroundColor: t.bg,
        borderLeft: `4px solid ${t.border}`,
        borderRadius: '8px',
        padding: '12px 16px',
        margin: '0 0 20px',
      }}
    >
      <Text
        style={{
          color: t.fg,
          fontSize: '14px',
          fontWeight: 600,
          margin: 0,
          lineHeight: '20px',
        }}
      >
        {children}
      </Text>
    </Section>
  );
};