import { Lightbulb } from "lucide-react";
import { compactQuestions } from "./utils";

interface SuggestedQuestionsBarProps {
  questions: string[];
  onSelect: (question: string) => void;
  disabled?: boolean;
}

export function SuggestedQuestionsBar({ questions, onSelect, disabled }: SuggestedQuestionsBarProps) {
  const filtered = compactQuestions(questions);
  if (filtered.length === 0) return null;

  return (
    <div className="flex flex-shrink-0 items-center gap-2 border-t border-slate-200 bg-white px-4 py-2">
      <Lightbulb className="h-3.5 w-3.5 flex-shrink-0 text-amber-500" />
      <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
        {filtered.map((question) => (
          <button
            key={question}
            type="button"
            onClick={() => { if (!disabled) onSelect(question); }}
            disabled={disabled}
            title={question}
            className="flex-shrink-0 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 py-1 text-xs text-slate-600 transition hover:border-emerald-300 hover:bg-emerald-50 hover:text-emerald-800 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-slate-200 disabled:hover:bg-white disabled:hover:text-slate-600"
          >
            {question}
          </button>
        ))}
      </div>
    </div>
  );
}