import React from "react";
import { View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "../../components/text";

interface PwnedPasswordInfo {
  title: string;
  message: string;
  severity: "error" | "warning" | "info";
  count: number;
}

interface PwnedPasswordWarningProps {
  pwnedInfo: PwnedPasswordInfo | null;
}

export default function PwnedPasswordWarning({ pwnedInfo }: PwnedPasswordWarningProps) {
  if (!pwnedInfo) {
    return null;
  }

  const iconName =
    pwnedInfo.severity === "error"
      ? "warning"
      : pwnedInfo.severity === "warning"
        ? "alert-circle"
        : "information-circle";

  const iconColor =
    pwnedInfo.severity === "error"
      ? "#EF4444"
      : pwnedInfo.severity === "warning"
        ? "#F59E0B"
        : "#3B82F6";

  const textClass =
    pwnedInfo.severity === "error"
      ? "text-red-500 dark:text-red-400"
      : pwnedInfo.severity === "warning"
        ? "text-amber-500 dark:text-amber-400"
        : "text-blue-500 dark:text-blue-400";

  return (
    <View className="mt-1 flex-row items-start gap-1.5">
      <Ionicons
        name={iconName as keyof typeof Ionicons.glyphMap}
        size={14}
        color={iconColor}
        style={{ marginTop: 2 }}
      />
      <Text className={`flex-1 text-xs ${textClass}`}>{pwnedInfo.message}</Text>
    </View>
  );
}