import { useColor } from "@/hooks/useColor";
import { CheckCircleIcon, InfoIcon, XCircleIcon } from "phosphor-react-native";
import React from "react";
import { Text, View } from "react-native";
import { ToastConfig as RCToastConfig } from "react-native-toast-message";

const SuccessToast = ({ text1 }: { text1?: string }) => {
  return (
    <View className="flex-row items-center bg-white px-4 py-3 rounded-2xl mx-10 shadow-lg border-l-4" style={{ borderLeftColor: "#10b981", width: "90%" }}>
      <View className="mr-3 bg-emerald-50 p-2 rounded-full">
        <CheckCircleIcon size={24} color="#10b981" weight="fill" />
      </View>
      <View className="flex-1">
        <Text className="text-slate-900 font-manrope-bold text-sm leading-tight">{text1}</Text>
      </View>
    </View>
  );
};

const ErrorToast = ({ text1 }: { text1?: string }) => {
  return (
    <View className="flex-row items-center bg-white px-4 py-3 rounded-2xl mx-10 shadow-lg border-l-4" style={{ borderLeftColor: "#ef4444", width: "90%" }}>
      <View className="mr-3 bg-red-50 p-2 rounded-full">
        <XCircleIcon size={24} color="#ef4444" weight="fill" />
      </View>
      <View className="flex-1">
        <Text className="text-slate-900 font-manrope-bold text-sm leading-tight">{text1}</Text>
      </View>
    </View>
  );
};

const InfoToast = ({ text1 }: { text1?: string }) => {
  const { primary } = useColor();
  return (
    <View className="flex-row items-center bg-white px-4 py-3 rounded-2xl mx-10 shadow-lg border-l-4" style={{ borderLeftColor: primary.base, width: "90%" }}>
      <View className="mr-3 rounded-full p-2" style={{ backgroundColor: primary[10] }}>
        <InfoIcon size={24} color={primary.base} weight="fill" />
      </View>
      <View className="flex-1">
        <Text className="text-slate-900 font-manrope-bold text-sm leading-tight">{text1}</Text>
      </View>
    </View>
  );
};

export const toastConfig: RCToastConfig = {
  success: (props) => <SuccessToast {...props} />,
  error: (props) => <ErrorToast {...props} />,
  info: (props) => <InfoToast {...props} />,
};
