import { forwardRef } from 'react';
import { QuestionType } from '@/types';

interface QuestionProps {
    question: QuestionType;
    answer?: string;
    onSelect: (questionId: number, option: string) => void;
}

export const Question = forwardRef<HTMLDivElement, QuestionProps>(
    ({ question, answer, onSelect }, ref) => {
        return (
            <div
                ref={ref}
                className="mb-4 scroll-mt-20 rounded-md border bg-white p-4 shadow-sm md:mb-8 md:p-6"
                id={`question-${question.id}`}
            >
                <h3 className="mb-4 text-[17px] font-medium leading-[1.65] md:text-lg md:leading-7">
                    {question.id}. {question.content}
                </h3>
                <div className="space-y-2">
                    {question.options.map((option) => (
                        <button
                            type="button"
                            aria-pressed={answer === option.value}
                            key={option.value}
                            className={`min-h-12 w-full touch-manipulation rounded-md px-4 py-3 text-left text-base leading-6 transition-colors duration-200
                                ${answer === option.value
                                    ? 'border-2 border-blue-600 bg-blue-50 font-medium text-blue-950'
                                    : 'border bg-white active:bg-gray-100 md:hover:bg-gray-50'
                                }`}
                            onClick={() => onSelect(question.id, option.value)}
                        >
                            {option.content}
                        </button>
                    ))}
                </div>
            </div>
        );
    }
);

Question.displayName = 'Question';