import React, { useState } from 'react';
import { Radio } from 'lucide-react';
import { Questions, questions } from './Questions';
import { ProductGrid } from './ProductGrid';

function EquipmentPicker() {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<string[]>([]);
  const [showResults, setShowResults] = useState(false);

  const handleAnswer = (answer: string) => {
    const newAnswers = [...answers, answer];
    if (currentQuestion < questions.length - 1) {
      setAnswers(newAnswers);
      setCurrentQuestion(curr => curr + 1);
    } else {
      setAnswers(newAnswers);
      setShowResults(true);
    }
  };

  const restart = () => {
    setCurrentQuestion(0);
    setAnswers([]);
    setShowResults(false);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <Radio className="w-12 h-12 text-purple-600 mb-4" />
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Podcast Equipment Picker</h1>
          <p className="text-lg text-gray-600">Find the perfect podcasting setup for your needs</p>
        </div>

        {!showResults ? (
          <Questions 
            currentQuestion={currentQuestion} 
            questions={questions} 
            onAnswer={handleAnswer} 
          />
        ) : (
          <div className="space-y-6">
            <ProductGrid answers={answers} />
            <button
              onClick={restart}
              className="mx-auto block px-6 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition-colors"
            >
              Start Over
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default EquipmentPicker;