import { CheckIcon, TimesIcon } from "@/assets/icons";
import { cn } from "@/lib/utils";

interface ResponseStatusProps {
  status: string;
  title: string;
  text1: string;
  text2: string;
}

export default function ResponseStatus({
  status,
  title,
  text1,
  text2,
}: ResponseStatusProps) {
  return (
    <div className="p-4 md:p-10 bg-bg md:rounded-[24px] rounded-[16px] space-y-5">
      <h3
        className={cn(
          "text-[32px] font-bold mb-5 flex items-center gap-[10px]",
          status == "success" ? "text-[#219653]" : "text-[#D53020]"
        )}
      >
        <span className="flex items-center justify-center w-9 h-9">
          {status == "success" ? (
            <CheckIcon className="text-[#27AE60] w-[30px] h-[30px]" />
          ) : (
            <TimesIcon className="text-[#FE3B29] w-[30px] h-[30px]" />
          )}
        </span>
        {title}
      </h3>
      <p className="text-text font-bold text-[20px] mb-0">
        {text1}
        <br />
        {text2}
      </p>
    </div>
  );
}