interface QuestionCardProps {
  question?: string
  options?: string[]
  selectedAnswer?: string
  onSelect?: (answer: string) => void
}

export function QuestionCard({ question, options, selectedAnswer, onSelect }: QuestionCardProps) {
  return (
    <div className="rounded-lg border p-4 space-y-3">
      <p className="font-medium">{question || "Question placeholder"}</p>
      {options && (
        <ul className="space-y-2">
          {options.map((opt) => (
            <li
              key={opt}
              onClick={() => onSelect?.(opt[0])}
              className={`rounded border p-2 text-sm cursor-pointer hover:bg-gray-50 ${
                selectedAnswer === opt[0] ? "border-blue-500 bg-blue-50" : ""
              }`}
            >
              {opt}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}