"use client";
import { cn } from "@/lib/utils";
import * as Tooltip from "@radix-ui/react-tooltip";
import { CheckCheck, Info, Minus } from "lucide-react";

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

const PricingCard = ({
  title,
  monthlyPrice,
  description,
  popular,
  indexNumber,
  cta,
}: PricingCardProps) => {
  return (
    <>
      <div
        className={cn(
          "relative flex z-[1] flex-col gap-6 overflow-hidden rounded-2xl w-full  xl:p-6 p-3 shadow  bg-gradient-to-t from-60% from-gray-950 to-gray-900 text-white",
          indexNumber === 1 && " from-[#4053ff] to-[#5c6cfc] text-white",
        )}
      >
        <div
          className={cn(
            "absolute inset-0 -z-10 h-full w-full  bg-[linear-gradient(to_right,#030712_1px,transparent_1px),linear-gradient(to_bottom,#030712_1px,transparent_1px)] bg-[size:2rem_2rem]",
            indexNumber === 1 &&
              "bg-[linear-gradient(to_right,#4053ff_1px,transparent_1px),linear-gradient(to_bottom,#4053ff_1px,transparent_1px)]",
          )}
        />

        <div className="relative z-10">
          {/* Header */}
          <h2
            className={cn(
              "flex items-center gap-3 md:text-xl text-sm font-medium capitalize",
              popular && "xl:flex-row flex-col-reverse gap-0 items-start",
            )}
          >
            {title}
            {popular && (
              <div className="mt-1 text-[0.7rem] rounded-full bg-white px-1 py-0 leading-5 text-black ">
                🔥 Popular
              </div>
            )}
          </h2>

          {/* Price */}
          <div className="mt-2 relative">
            <div className="flex items-baseline">
              <span className="xl:text-4xl md:text-xl text-sm font-medium">
                {monthlyPrice === undefined ? (
                  "Free"
                ) : (
                  <span>$ {monthlyPrice}</span>
                )}
              </span>
              {monthlyPrice !== undefined && (
                <>
                  <span
                    className={cn(
                      "ml-1 md:block hidden text-sm text-muted-foreground",
                      popular && "text-gray-100",
                    )}
                  >
                    / month
                  </span>
                  <span
                    className={cn(
                      "ml-1 block md:hidden text-sm text-muted-foreground",
                      popular && "text-gray-100",
                    )}
                  >
                    / mo.
                  </span>
                </>
              )}
            </div>
          </div>
        </div>
        <button
          className={cn(
            "mt-auto h-fit xl:text-base text-sm w-full rounded-lg transition-all font-semibold duration-300  relative z-[2] p-2 cursor-pointer",
            "hover:shadow-lg hover:translate-y-[-2px] inline-block text-center bg-white text-black  hover:bg-white/90",
          )}
        >
          {cta}
        </button>
      </div>
    </>
  );
};

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

const MainPricing = ({ plans }: { plans: Plan[] }) => {
  const allFeatures = [
    "Unlimited Components",
    "Easily Edited and Customized",
    "Combine Files Mercurius",
    "Health Care Included",
    "AI-Powered Automation",
    "Seamless Third-Party Integrations",
    "24/7 Customer Support",
    "Advanced Security & Encryption",
    "Custom Branding Options",
    "Cloud-Based Access Anywhere",
    "Real-Time Collaboration",
    "Data Analytics & Insights",
    "Multi-User Access with Roles",
    "Priority Support & Consultation",
    "Regular Feature Updates",
    "Performance Optimization Tools",
    "Custom Workflows & Automation",
    "Offline Access & Sync",
  ];
  return (
    <>
      <div className="relative rounded-xl max-w-screen-xl mx-auto sm:px-8 px-1 pt-0">
        <div className="flex md:flex-row flex-col sticky items-center top-0 pt-8 bg-black">
          <div className="absolute xl:-bottom-[25%] lg:-bottom-[20%] -bottom-[15%] left-0 h-14 w-full bg-gradient-to-b from-black from-40%"></div>
          <h1 className="xl:text-5xl lg:text-3xl md:text-2xl md:block hidden text-xl flex-shrink-0 xl:w-96 lg:w-72 md:w-56 ">
            Compare Plans
          </h1>
          <div className="md:px-4 sm:px-2 flex md:ml-0 sm:ml-20 ml-0 justify-center md:gap-2 gap-1 w-full flex-1">
            {plans.map((plan, index) => (
              <PricingCard
                key={index}
                title={plan.title}
                monthlyPrice={plan.monthlyPrice}
                yearlyPrice={plan.yearlyPrice}
                description={plan.description}
                features={plan.features}
                popular={plan.popular}
                highlighted={plan.highlighted}
                price={plan.price}
                cta={plan.cta}
                indexNumber={index}
              />
            ))}
          </div>
        </div>
        <div className=" overflow-hidden space-y-3 py-5 pt-10 ">
          {allFeatures.map((feature, index) => (
            <div
              key={index}
              className={cn("flex items-center gap-2 rounded-xl")}
            >
              <div className="flex-shrink-0 xl:text-base md:text-sm text-xs flex justify-between font-medium xl:w-96 lg:w-72 md:w-56 w-40 xl:px-6 md:px-4 px-2">
                {feature}
                <Tooltip.Provider delayDuration={200}>
                  <Tooltip.Root>
                    <Tooltip.Trigger asChild>
                      <Info className="text-gray-400  xl:w-5 xl:h-5 cursor-pointer" />
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                      <Tooltip.Content
                        className="select-none rounded w-72 leading-[120%] text-center z-50 bg-gray-950 border text-white border-gray-900 px-[15px] py-2.5 text-[15px] text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
                        sideOffset={5}
                      >
                        Apply and edit everything include {feature}
                        <Tooltip.Arrow className="fill-gray-900" />
                      </Tooltip.Content>
                    </Tooltip.Portal>
                  </Tooltip.Root>
                </Tooltip.Provider>
              </div>
              {plans.map((plan, planIndex) => (
                <div key={planIndex} className="w-full text-center">
                  {plan.features.includes(feature) ? (
                    <span className="w-full md:h-12 h-10 mx-auto rounded-full grid place-content-center  bg-gray-950 border border-gray-900">
                      <CheckCheck className="mx-auto h-4 w-4 text-white" />
                    </span>
                  ) : (
                    <span className="w-full md:h-12 h-10 mx-auto rounded-full grid place-content-center ">
                      <Minus />
                    </span>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default MainPricing;
pricing13
