import React from "react";
import { View } from "react-native";
import type { BaseToastProps } from "react-native-toast-message";
import { Text } from "../text";

/**
 * Shared toast renderer config for `react-native-toast-message`. Three
 * variants (success / error / info) rendered as pill cards in the
 * package's standard token palette. Used by `ToastPortal` on both
 * native and web.
 */
export const toastConfig = {
  success: ({ text1, text2 }: BaseToastProps) => (
    <View className="self-center bg-green-500 dark:bg-green-600 px-4 py-3 rounded-lg mx-4 mt-4">
      <Text className="text-white font-semibold">{text1}</Text>
      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
    </View>
  ),
  error: ({ text1, text2 }: BaseToastProps) => (
    <View className="self-center bg-destructive dark:bg-red-600 px-4 py-3 rounded-lg mx-4 mt-4">
      <Text className="text-white font-semibold">{text1}</Text>
      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
    </View>
  ),
  info: ({ text1, text2 }: BaseToastProps) => (
    <View className="self-center bg-blue-500 dark:bg-blue-600 px-4 py-3 rounded-lg mx-4 mt-4">
      <Text className="text-white font-semibold">{text1}</Text>
      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
    </View>
  ),
};