"use client";

import type { StudyIntent } from "@/lib/study-intents";
import { cn } from "@/lib/utils";
import { primaryChips } from "./constants";

export function QuickActions({
  activeIntent,
  disabled,
  onAction,
  layout = "auto",
}: {
  activeIntent: StudyIntent;
  disabled: boolean;
  onAction: (intent: StudyIntent, prompt: string) => void;
  layout?: "auto" | "scroll" | "grid";
}) {
  const useScroll = layout === "scroll";
  const useGrid = layout === "grid" || layout === "auto";

  return (
    <div
      className={cn(
        "kb-quick-actions",
        useScroll ? "-mx-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "",
      )}
    >
      <div
        className={cn(
          "gap-2",
          useScroll ? "flex min-w-max" : "",
          useGrid && !useScroll ? "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4" : "",
          useGrid && useScroll ? "flex min-w-max sm:grid sm:min-w-0 sm:grid-cols-3" : "",
        )}
      >
        {primaryChips.map((chip) => {
          const Icon = chip.icon;
          const active = chip.intent === activeIntent;
          return (
            <button
              key={chip.label}
              type="button"
              disabled={disabled}
              onClick={() => onAction(chip.intent, chip.prompt)}
              className={cn(
                "group inline-flex min-h-[2.85rem] shrink-0 items-center justify-center gap-2 rounded-2xl border px-3 py-2 text-center text-xs font-semibold transition duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/24 disabled:cursor-not-allowed disabled:opacity-45 sm:min-h-[3.15rem]",
                active
                  ? "border-white/[0.22] bg-white text-black shadow-[0_14px_34px_rgba(255,255,255,0.08)]"
                  : "border-white/[0.085] bg-white/[0.028] text-white/58 hover:border-white/[0.17] hover:bg-white/[0.05] hover:text-white",
              )}
            >
              <Icon className="size-3.5 shrink-0" />
              <span className="min-w-0 leading-4">{chip.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}