import { Check, X } from "lucide-react";

import React from "react";
import { cn } from "@/lib/utils";

interface InvoiceStatusCardInterface {
  type: boolean;
}

export const InvoiceStatusCard: React.FC<InvoiceStatusCardInterface> = ({
  type,
}) => {
  return (
    <div className="w-full relative rounded-[32px] border-2 border-mainBlue py-10 flex flex-col items-center gap-5">
      <div className="w-20 h-20 bg-slate-200/30 flex items-center justify-center rounded-full">
        <div
          className={cn(
            "w-12 h-12 bg-mainBlue rounded-full flex items-center justify-center",
            {
              "bg-mainBlue": type,
              "bg-red-600": !type,
            }
          )}
        >
          {type ? (
            <Check className="text-white" />
          ) : (
            <X className="text-white" />
          )}
        </div>
      </div>

      <h6 className="md:text-xl text-slate-600 text-center">
        {type ? "طريقة الدفع ناجحة" : "طريقة الدفع غير ناجحه"}
      </h6>
      <h2
        className={cn("text-xl md:text-3xl text-center", {
          "mb-24": type,
        })}
      >
        {type
          ? "8,240,000 ريال سعودي"
          : "برجاء دفع المبلغ التاني 8,240,000 ريال سعودي"}
      </h2>

      <div
        className={cn(
          "w-full relative flex items-center justify-between border-dashed border-mainBlue px-5 text-slate-500 before:inline-block before:content-[''] before:w-10 before:h-10 before:z-20 before:rounded-full before:absolute before:-left-5 before:-top-5 before:bg-white before:border-2 before:border-mainBlue after:inline-block after:content-[''] after:w-10 after:h-10 after:z-20 after:rounded-full after:absolute after:-right-5 after:bg-white after:border-2 after:border-mainBlue",
          {
            "border-t before:-top-5 after:-top-5 pt-10": type,
            "before:-top-[120px] after:-top-[120px]": !type,
          }
        )}
      >
        <div
          className={cn("absolute left-[-22px] w-5 h-10 bg-white z-30", {
            "bottom-[44px]": type,
            "bottom-[80px]": !type,
          })}
        />
        <div
          className={cn("absolute right-[-22px] w-5 h-10 bg-white z-30", {
            "bottom-[44px]": type,
            "bottom-[80px]": !type,
          })}
        />

        {type && (
          <>
            <p>رقم المرجع</p>
            <p>0000000000000</p>
          </>
        )}
      </div>
    </div>
  );
};