"use client";

import classNames from "classnames";
import type { BillingPeriod } from "@/lib/types/pricing";

interface BillingToggleProps {
  period: BillingPeriod;
  onChange: (period: BillingPeriod) => void;
  isAr: boolean;
}

export default function BillingToggle({
  period,
  onChange,
  isAr,
}: BillingToggleProps) {
  return (
    <div className="mt-8 flex justify-center">
      <div className="inline-flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg p-1 gap-1">
        <button
          onClick={() => onChange("monthly")}
          className={classNames(
            "px-6 py-2 rounded-md font-semibold transition-all",
            period === "monthly"
              ? "bg-white dark:bg-slate-700 text-brand-green shadow-md"
              : "text-neutral-600 dark:text-neutral-400 hover:text-brand-green",
          )}
        >
          {isAr ? "شهرياً" : "Monthly"}
        </button>
        <button
          onClick={() => onChange("yearly")}
          className={classNames(
            "px-6 py-2 rounded-md font-semibold transition-all relative",
            period === "yearly"
              ? "bg-white dark:bg-slate-700 text-brand-green shadow-md"
              : "text-neutral-600 dark:text-neutral-400 hover:text-brand-green",
          )}
        >
          {isAr ? "سنوياً" : "Yearly"}
          <span className="absolute -top-2 -right-2 bg-emerald-500 text-white text-xs px-2 py-0.5 rounded-full font-bold">
            {isAr ? "وفّر 7%" : "Save 7%"}
          </span>
        </button>
      </div>
    </div>
  );
}