/*
 * 알림 배너 — degraded(서버 미구현/오프라인 폴백)·warning·error·info 공용.
 */
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, type } from '../theme';

type Tone = 'info' | 'warning' | 'error' | 'degraded';

const toneColor: Record<Tone, { border: string; bg: string; text: string }> = {
  info: { border: colors.primary600, bg: colors.primary050, text: colors.primary700 },
  warning: { border: colors.warning, bg: '#FFF7ED', text: colors.warning },
  error: { border: colors.error, bg: '#FEF3F2', text: colors.error },
  degraded: { border: colors.neutral500, bg: colors.neutral050, text: colors.neutral700 },
};

export function Banner({ tone = 'info', children }: { tone?: Tone; children: React.ReactNode }) {
  const c = toneColor[tone];
  return (
    <View style={[styles.banner, { borderColor: c.border, backgroundColor: c.bg }]}>
      <Text style={[styles.text, { color: c.text }]}>{children}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  banner: {
    borderWidth: 1,
    borderRadius: radius.md,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  text: { fontSize: type.body.fontSize, fontWeight: '500' },
});