import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { Pressable, Text, View } from 'react-native';

interface SuccessModalProps {
  title: string;
  message: string;
  primaryAction: string;
  secondaryAction?: string;
  onPrimary?: () => void;
  onSecondary?: () => void;
}

/**
 * 成功/结果弹窗卡片 — iOS 居中样式
 * 绿色圆形打钩 + 标题 + 描述 + 按钮组
 */
export function SuccessModal({
  title,
  message,
  primaryAction,
  secondaryAction,
  onPrimary,
  onSecondary,
}: SuccessModalProps) {
  return (
    <View className="bg-surface-container-lowest border border-outline-variant p-8 rounded-xl items-center">
      <View className="w-16 h-16 rounded-full bg-green-50 items-center justify-center mb-4">
        <Ionicons name="checkmark-circle" size={40} color="#22c55e" />
      </View>
      <Text className="text-xl font-bold text-on-surface mb-2">{title}</Text>
      <Text className="text-on-surface-variant text-sm text-center leading-relaxed mb-6">
        {message}
      </Text>
      <Pressable
        onPress={onPrimary}
        className="w-full py-4 bg-primary rounded-xl items-center mb-3"
        style={({ pressed }) => ({ opacity: pressed ? 0.9 : 1 })}
      >
        <Text className="text-on-primary font-semibold">{primaryAction}</Text>
      </Pressable>
      {secondaryAction && (
        <Pressable onPress={onSecondary} className="w-full py-4 items-center">
          <Text className="text-primary font-medium">{secondaryAction}</Text>
        </Pressable>
      )}
    </View>
  );
}
