import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Label } from "@/components/ui/label";

type QuestionCardProps = {
  questionNumber: number;
  question: string;
  options: string[];
};

export function QuestionCard({ questionNumber, question, options }: QuestionCardProps) {
  return (
    <Card>
      <CardHeader>
        <p className="text-xs font-semibold uppercase tracking-wide text-[#5d6b84]">Pregunta {questionNumber}</p>
        <h2 className="text-lg font-semibold text-[#1e2b45]">{question}</h2>
      </CardHeader>
      <CardContent className="space-y-3">
        {options.map((option) => (
          <Label
            key={option}
            className="flex cursor-pointer items-center gap-2 rounded-lg border border-[#dde5f2] px-3 py-2 font-medium text-[#3a4963] hover:border-[#b7c6e1]"
          >
            <input type="radio" name="question" className="h-4 w-4 accent-[#0f2a5f]" />
            {option}
          </Label>
        ))}
      </CardContent>
    </Card>
  );
}
