"use client";
import { cn } from "@/lib/utils";
import { ArrowRight, CheckCheck } from "lucide-react";

type PricingCardProps = {
  title: string;
  monthlyPrice?: number;
  yearlyPrice?: number;
  description: string;
  features: string[];
  popular?: boolean;
  highlighted?: boolean;
  price?: number;
  disabled?: boolean;
  cta?: string;
  indexNumber: number;
  discount?: number;
  splot?: number;
};

const PricingCard = ({
  title,
  features,
  popular,
  price,
  cta = "Get Started",
  indexNumber,
  discount,
  splot,
}: PricingCardProps) => {
  return (
    <>
      <div
        className={cn(
          "relative flex flex-col gap-6 rounded-2xl border h-fit mt-auto border-gray-200 xl:p-6 lg:p-4 sm:p-2 p-4 shadow xl:w-[30rem] sm:w-[26rem] w-full bg-white text-black",
          indexNumber === 1 &&
            "z-[1] bg-gradient-to-t from-gray-950 from-60% to-neutral-900 text-white p-2 gap-2",
          indexNumber === 2 &&
            "z-[1] bg-gradient-to-t from-[#4053ff] from-60% to-[#5c6cfc] text-white",
        )}
      >
        {popular && (
          <h1 className="py-2 xl:text-xl text-lg text-center rounded-full px-1 leading-5">
            🔥 Most Popular
          </h1>
        )}

        {indexNumber === 2 && (
          <div className="absolute inset-0 -z-10 h-full w-full rounded-2xl  bg-[linear-gradient(to_right,#4053ff_1px,transparent_1px),linear-gradient(to_bottom,#4053ff_1px,transparent_1px)] bg-[size:2rem_2rem]" />
        )}
        <div
          className={
            popular
              ? "bg-gradient-to-t from-gray-900 from-60% to-neutral-800 xl:p-6 lg:p-4 p-3 relative rounded-2xl"
              : ""
          }
        >
          {indexNumber === 1 && (
            <div className="absolute inset-0 z-[1] h-full w-full rounded-2xl  bg-[linear-gradient(to_right,#111827 _1px,transparent_1px),linear-gradient(to_bottom,#111827_1px,transparent_1px)] bg-[size:2rem_2rem]" />
          )}
          <div className="relative z-10">
            <span
              className={cn(
                "flex items-center gap-1 bg-gradient-to-l p-1 rounded-md from-gray-500 border border-gray-700 w-fit text-xs font-medium capitalize",
                indexNumber === 2 &&
                  "bg-gradient-to-l from-[#4053ff] border-[#4f61ff] backdrop-blur-lg",
                indexNumber === 0 && "from-gray-200 border-gray-200",
              )}
            >
              {title}
              <span
                className={cn(
                  "bg-black backdrop-blur-md p-1 rounded-md",
                  indexNumber === 2 && "bg-white text-black",
                  indexNumber === 0 && "bg-white text-black",
                )}
              >
                25%OFF
              </span>
            </span>
            {/* Price */}
            <div className="mt-4 relative">
              <h1 className="flex gap-1 items-baseline">
                <span className="text-3xl font-medium">${price}</span>
                <span
                  className={cn(
                    "line-through text-gray-400",
                    indexNumber === 2 && " text-gray-300",
                  )}
                >
                  ${discount}
                </span>
              </h1>
            </div>
            {/* Features */}
            <ul className="mb-3 mt-5 space-y-3">
              {features.map((feature, index) => (
                <li
                  key={index}
                  className={cn(
                    "flex items-center gap-2 xl:text-sm text-xs",
                    popular && "text-white",
                  )}
                >
                  <CheckCheck className="h-4 w-4 flex-shrink-0" />
                  {feature}
                </li>
              ))}
            </ul>
          </div>

          {/* CTA Button */}
          <button
            className={cn(
              "mt-auto h-fit flex gap-2 items-center justify-center w-full bg-white hover:bg-white/90 transition-all font-semibold duration-300  relative z-[1] rounded-xl md:p-3 p-2 cursor-pointer hover:shadow-lg hover:translate-y-[-2px] text-black md:text-base text-xs ",
              indexNumber === 0 && "bg-black hover:bg-black/90 text-white",
            )}
          >
            {cta} <ArrowRight />
          </button>
          <p
            className={cn(
              "text-center pt-3 lg:text-sm text-xs text-gray-200",
              indexNumber === 0 && "text-gray-950",
            )}
          >
            <strong>{splot} Splots</strong> Left this Months
          </p>
        </div>
      </div>
    </>
  );
};

type Plan = {
  title: string;
  price?: number;
  description: string;
  features: string[];
  popular?: boolean;
  highlighted?: boolean;
  cta?: string;
  splot?: number;
  disCountPrice?: number;
};

const MainPricing = ({ plans }: { plans: Plan[] }) => {
  return (
    <>
      <div className="md:px-4 px-2 mt-0 sm:flex sm:justify-center items-end sm:space-y-0 -space-y-3  md:gap-4 sm:gap-2">
        {plans.map((plan, index) => (
          <PricingCard
            key={index}
            title={plan.title}
            price={plan.price}
            discount={plan.disCountPrice}
            description={plan.description}
            features={plan.features}
            popular={plan.popular}
            highlighted={plan.highlighted}
            cta={plan.cta}
            indexNumber={index}
            splot={plan.splot}
          />
        ))}
      </div>
      <div className="border text-white w-[98%] space-y-2 mx-auto border-blue-500 bg-gradient-to-r from-blue-600 to-blue-300 rounded-2xl mt-4 p-4">
        <h1 className="sm:text-2xl text-xl font-semibold">
          Book a 20-min intro call
        </h1>
        <p className="sm:text-sm text-xs">
          Still unsure about "Cut it Done", onboarding, or how we can help?{" "}
          <br /> Book a quick 20-minute call for clear explantion
        </p>
        <button
          className={cn(
            "mt-auto h-fit w-fit flex gap-2 justify-center bg-white hover:bg-white/90 transition-all font-semibold duration-300 relative z-[1] rounded-xl p-3 cursor-pointer hover:shadow-lg hover:translate-y-[-2px] text-black",
          )}
        >
          Book a Call Now <ArrowRight />
        </button>
      </div>
    </>
  );
};

export default MainPricing;
pricing12
