import React from 'react'
import { Flag, ChevronLeft, ChevronRight } from 'lucide-react'

export default function QuestionPanel({
  question,
  questionNumber,
  totalQuestions,
  selectedAnswer,
  onAnswerSelect,
  onMarkForReview,
  isMarked,
  onPrevious,
  onNext,
  canGoPrevious,
  canGoNext,
  contrast
}) {
  const progressPercent = (questionNumber / totalQuestions) * 100

  return (
    <div className="question-panel">
      {/* Progress Bar */}
      <div className="mb-6">
        <div className="flex justify-between items-center mb-2">
          <h2 className="text-lg font-semibold">Question {questionNumber} of {totalQuestions}</h2>
          <button
            onClick={onMarkForReview}
            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
              isMarked
                ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            <Flag className="w-4 h-4" />
            {isMarked ? 'Marked' : 'Mark for Review'}
          </button>
        </div>
        <div className="progress-bar">
          <div
            className="progress-fill"
            style={{ width: `${progressPercent}%` }}
          />
        </div>
      </div>

      {/* Question Text */}
      <div className="question-text">
        {question.text}
      </div>

      {/* Image if present */}
      {question.image && (
        <div className="image-container">
          <img
            src={question.image}
            alt="Question Image"
            style={{ filter: `contrast(${contrast}%)` }}
          />
          <p className="text-xs text-gray-500 mt-2">
            Note: You can adjust image contrast in the settings panel
          </p>
        </div>
      )}

      {/* Answer Options */}
      <div className="space-y-2 mb-8">
        {question.options.map((option, idx) => (
          <button
            key={idx}
            onClick={() => onAnswerSelect(option.label)}
            className={`answer-option w-full text-left ${
              selectedAnswer === option.label ? 'selected' : ''
            }`}
          >
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center border-2 border-current rounded">
                {selectedAnswer === option.label && (
                  <div className="w-3 h-3 bg-current rounded-sm" />
                )}
              </div>
              <div className="flex-1">
                <div className="font-semibold">{option.label}</div>
                <div className="text-gray-600">{option.text}</div>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Navigation Buttons */}
      <div className="navigation-buttons">
        <button
          onClick={onPrevious}
          disabled={!canGoPrevious}
          className="btn btn-secondary flex items-center gap-2"
        >
          <ChevronLeft className="w-4 h-4" />
          Previous
        </button>
        <button
          onClick={onNext}
          disabled={!canGoNext}
          className="btn btn-primary flex items-center gap-2 ml-auto"
        >
          Next
          <ChevronRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}