import { Ionicons } from "@expo/vector-icons";
import { View } from "react-native";
import { Text } from "@/components/ui/Text";
import { colors, radii } from "@/lib/theme";

export function EscalationBanner({
  title = "Escalation active",
  body = "If a dose isn’t confirmed in time, we’ll alert your emergency contact.",
}: {
  title?: string;
  body?: string;
}) {
  return (
    <View
      style={{
        flexDirection: "row",
        gap: 10,
        padding: 14,
        borderRadius: radii.md,
        backgroundColor: colors.warnSoft,
        borderWidth: 1,
        borderColor: "#F0D7A8",
      }}
    >
      <Ionicons name="alert-circle" size={20} color={colors.warn} />
      <View style={{ flex: 1 }}>
        <Text variant="label" color={colors.warn}>
          {title}
        </Text>
        <Text variant="caption" color={colors.muted} style={{ marginTop: 4 }}>
          {body}
        </Text>
      </View>
    </View>
  );
}