import React from 'react';
import { ChevronRight } from 'lucide-react';

interface QuestionsProps {
  currentQuestion: number;
  questions: Question[];
  onAnswer: (answer: string) => void;
}

export const questions = [
  {
    id: 1,
    text: "What's your budget for podcast equipment?",
    options: ["Under $200", "$200-$500", "Over $500"]
  },
  {
    id: 2,
    text: "What type of microphone connection do you prefer?",
    options: ["USB (Simpler Setup)", "XLR (Professional Quality)", "Either is fine"]
  },
  {
    id: 3,
    text: "How many people will typically be on your podcast?",
    options: ["Solo", "2 People", "3+ People"]
  },
  {
    id: 4,
    text: "Do you plan to record in a treated space?",
    options: ["Yes, I have acoustic treatment", "No, regular room", "Planning to add treatment"]
  }
];

export function Questions({ currentQuestion, questions, onAnswer }: QuestionsProps) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <div className="mb-8">
        <div className="flex items-center justify-between mb-4">
          <span className="text-sm font-medium text-gray-500">
            Question {currentQuestion + 1} of {questions.length}
          </span>
          <div className="w-32 h-2 bg-gray-200 rounded-full">
            <div 
              className="h-2 bg-purple-600 rounded-full transition-all duration-300"
              style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
            ></div>
          </div>
        </div>
        <h2 className="text-2xl font-semibold text-gray-900 mb-6">
          {questions[currentQuestion].text}
        </h2>
        <div className="space-y-3">
          {questions[currentQuestion].options.map((option, index) => (
            <button
              key={index}
              onClick={() => onAnswer(option)}
              className="w-full text-left px-6 py-4 rounded-lg border border-gray-200 hover:border-purple-500 hover:bg-purple-50 transition-all duration-200 flex items-center justify-between group"
            >
              <span className="text-gray-700 group-hover:text-purple-700">{option}</span>
              <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-purple-500" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}