"use client";

import type { QuestionType } from "@/types";
import { QUESTION_TYPES } from "@/config/question-types";
import { cn } from "@/lib/utils/cn";

interface QuestionLibraryProps {
  onAdd: (type: QuestionType) => void;
  disabled?: boolean;
  className?: string;
}

export function QuestionLibrary({
  onAdd,
  disabled,
  className,
}: QuestionLibraryProps) {
  return (
    <div className={cn("bg-white p-4", className)}>
      <div className="mb-2 mt-0 text-[11px] font-bold uppercase tracking-wide text-muted">
        Question library
      </div>
      {QUESTION_TYPES.map(({ type, label, icon: Icon }) => (
        <button
          key={type}
          type="button"
          disabled={disabled}
          onClick={() => onAdd(type)}
          className="mb-2 flex w-full cursor-grab items-center gap-2.5 rounded-[9px] border border-border bg-white p-2.5 text-left text-[12.5px] font-semibold transition-all hover:border-primary hover:bg-[#F8FBFF] active:translate-x-0.5 disabled:opacity-50"
        >
          <Icon className="h-4 w-4 shrink-0 text-primary" strokeWidth={2} />
          {label}
        </button>
      ))}
      <div className="mb-2 mt-3.5 text-[11px] font-bold uppercase tracking-wide text-muted">
        Logic
      </div>
      <div className="flex items-center gap-2.5 rounded-[9px] border border-border bg-[#F8FAFC] p-2.5 text-[12.5px] font-semibold text-muted">
        Skip logic is configured per question in the settings panel →
      </div>
    </div>
  );
}