"use client";

import { useState } from "react";
import { Lightbulb, ChevronDown, ChevronUp } from "lucide-react";
import { quickQuestions } from "@/lib/utils";
import { cn } from "@/lib/utils";

interface QuickQuestionsProps {
  onSelect: (question: string) => void;
  disabled?: boolean;
}

export function QuickQuestions({ onSelect, disabled }: QuickQuestionsProps) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="flex flex-col bg-white rounded-2xl border border-neutral-100 shadow-sm overflow-hidden">
      {/* Header — always visible */}
      <button
        type="button"
        onClick={() => setCollapsed((v) => !v)}
        className={cn(
          "flex items-center justify-between px-3 py-2 transition-colors",
          collapsed
            ? "bg-neutral-50 hover:bg-neutral-100"
            : "bg-brand-green-50 hover:bg-brand-green-100"
        )}
      >
        <div className="flex items-center gap-1.5">
          <Lightbulb className="h-3 w-3 text-brand-green" />
          <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-wider">
            Pertanyaan Populer
          </span>
        </div>
        {collapsed ? (
          <ChevronDown className="h-3.5 w-3.5 text-neutral-400" />
        ) : (
          <ChevronUp className="h-3.5 w-3.5 text-neutral-400" />
        )}
      </button>

      {/* Collapsible body */}
      {!collapsed && (
        <div className="flex flex-wrap gap-2 px-3 pb-3">
          {quickQuestions.map((q, i) => (
            <button
              key={i}
              onClick={() => onSelect(q)}
              disabled={disabled}
              className={cn(
                "text-xs text-left px-4 py-2 rounded-xl border border-neutral-200 bg-white text-neutral-700",
                "hover:border-brand-green hover:text-brand-green hover:bg-brand-green-50",
                "transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
                "max-w-xs"
              )}
              title={q}
            >
              {q}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}