"use client";

import { Button } from "@/components/ui/button";
import { PackageCardProps } from "./packagesConfig";
import { useTranslations } from "next-intl";
import { AIIcon } from "@/assets/icons";
import { useParams } from "next/navigation";
import { SaudiRiyal } from "lucide-react";

export default function PackageCard({ plan }: PackageCardProps) {
  const t = useTranslations("packages");
  const { name, price, isPopular, features } = plan;
  const { locale } = useParams() as { locale?: string };
  const currency = <SaudiRiyal className="h-6 h-6 inline" />;
  return (
    <div
      className={`
          relative w-full max-w-[373px] rounded-[24px] 
          overflow-hidden shadow-card bg-[#FEFEFE] min-h-[543px]
          flex flex-col
          ${isPopular ? "py-20 relative" : "py-10"}
        `}
    >
      {isPopular && (
        <div
          className="absolute top-0 [inset-inline-start:0]
            bg-secondary-16 text-primary-dark p-4 text-[10px] md:text-[14px] font-bold rounded-[24px] rounded-se-none rounded-es-none z-10"
        >
          {t("label")}
        </div>
      )}

      <div>
        <h3 className="text-[24px] font-bold text-primary-dark px-10 mb-4">
          {name}
        </h3>
        <div
          className={`
          flex items-baseline px-10 bg-secondary-16 text-primary-dark font-bold
          ${
            isPopular
              ? "[background-image:var(--color-gradient)]"
              : "bg-secondary-16"
          }
        `}
        >
          <span className="text-[40px] ">
            {price}
            {currency}/
          </span>
          <span className="text-[20px]">{t("period")}</span>
        </div>
      </div>

      <div className="px-10 pt-5">
        <ul className="space-y-3">
          {features.map((feature, index) => (
            <li
              key={index}
              className="flex items-center gap-2 text-[#2D2D2D] text-[14px] font-bold"
            >
              <span className="w-[18px] h-[18px] flex items-center justify-center shrink-0 text-primary-dark rounded-full bg-primary-8">
                <svg
                  width="10"
                  height="8"
                  viewBox="0 0 10 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M9.4756 0.108254C9.65744 0.267365 9.67586 0.543761 9.51675 0.725602L3.39175 7.7256C3.31202 7.81673 3.19808 7.87073 3.07706 7.87476C2.95604 7.87879 2.83876 7.83249 2.75314 7.74687L0.128141 5.12186C-0.0427136 4.95101 -0.0427136 4.674 0.128141 4.50315C0.298995 4.33229 0.576005 4.33229 0.746859 4.50315L3.04119 6.79748L8.85825 0.14941C9.01736 -0.0324308 9.29375 -0.0508572 9.4756 0.108254Z"
                    fill="currentColor"
                  />
                </svg>
              </span>
              {feature}
            </li>
          ))}
        </ul>
      </div>

      <div className="flex justify-center pt-5 mt-auto">
        <Button
          as="link"
          href={`/${locale ?? ""}/subscribe`}
          className="mx-auto"
        >
          {t("subscribe")}
          <AIIcon />
        </Button>
      </div>
    </div>
  );
}