"use client";

import { VARIABLE_GROUPS, TEMPLATE_VARIABLES, variableToken } from "@/lib/email-builder/variables";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

export function VariableToolbar({
  onInsert,
  className,
}: {
  onInsert: (key: string) => void;
  className?: string;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";

  return (
    <div className={cn("space-y-2", className)}>
      <p className="text-xs font-semibold text-muted-foreground">
        {isAr ? "إدراج متغير" : "Insert variable"}
      </p>
      <div className="-mx-1 overflow-x-auto pb-1">
        <div className="flex min-w-max flex-col gap-3 px-1">
          {VARIABLE_GROUPS.map((group) => {
            const vars = TEMPLATE_VARIABLES.filter((v) => v.group === group.id);
            return (
              <div key={group.id}>
                <p className="mb-1.5 text-[10px] font-bold uppercase tracking-wide text-primary/80">
                  {isAr ? group.labelAr : group.labelEn}
                </p>
                <div className="flex flex-wrap gap-1.5">
                  {vars.map((v) => (
                    <button
                      key={v.key}
                      type="button"
                      onClick={() => onInsert(v.key)}
                      className="rounded-full border border-primary/25 bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary hover:text-primary-foreground dark:border-primary/40"
                    >
                      {variableToken(v.key)}
                    </button>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}