"use client";
import { FaCheck } from "react-icons/fa6";
import { useTranslations } from "next-intl";
import { PackageProperty } from "@/types/package";

interface PackageFeaturesProps {
  features: PackageProperty[];
  billingCycle?: "month" | "year";
  /** Whether the *other* billing cycle has features — points the visitor there instead of the generic empty message. */
  otherCycleHasFeatures?: boolean;
}

export default function PackageFeatures({
  features,
  billingCycle,
  otherCycleHasFeatures = false,
}: PackageFeaturesProps) {
  const t = useTranslations("SubscribePage");
  const t2 = useTranslations();

  return (
    <div className="flex flex-col gap-4 sm:gap-6">
      <h3 className="text-[18px] font-bold">{t("packageFeatures")} :</h3>
      {features.length === 0 ? (
        <p className="text-[14px] text-white">
          {otherCycleHasFeatures
            ? billingCycle === "year"
              ? t2("noFeaturesCheckMonthly")
              : t2("noFeaturesCheckYearly")
            : t2("noFeatures")}
        </p>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {features.map((feature, index) => (
            <div key={index} className="flex items-center gap-2">
              <span className="bg-secondary-32 p-1.5 w-[22px] h-[22px] rounded-full flex items-center justify-center">
                <FaCheck className="text-secondary-main size-[18px]" />
              </span>
              <span className="text-[14px] font-bold">
                {feature.description}{" "}
                <small className="text-secondary-main/70">
                  {feature.type === "feature"
                    ? ""
                    : feature.type === "unlimited" ||
                      feature.type === "infinite" ||
                      feature.value === -1
                    ? t2("unlimited")
                    : feature.value}
                </small>
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}