auditly/components/figma/FigmaQuestion.tsx

import React from 'react';

interface FigmaQuestionProps {
    questionNumber?: string | number;
    title: string;
    description?: string;
    answer?: string;
    onAnswerChange?: (value: string) => void;
    onBack?: () => void;
    onNext?: () => void;
    showNavigation?: boolean;
    nextLabel?: string;
    backLabel?: string;
    className?: string;
}

export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
    questionNumber = 'Q',
    title,
    description,
    answer = '',
    onAnswerChange,
    onBack,
    onNext,
    showNavigation = true,
    nextLabel = 'Next',
    backLabel = 'Back',
    className = ''
}) => {
    return (
        <div className={`w-[600px] px-5 pt-5 pb-6 bg-Other-White rounded-2xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-end items-end gap-4 ${className}`}>
            {/* Question Header */}
            <div className="self-stretch inline-flex justify-start items-start gap-3">
                <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">
                    {questionNumber}
                </div>
                <div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
                    <div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-xl font-semibold font-['Inter'] leading-loose">
                        {title}
                    </div>
                    {description && (
                        <div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">
                            {description}
                        </div>
                    )}
                </div>
            </div>

            {/* Separator */}
            <div data-svg-wrapper>
                <svg width="563" height="5" viewBox="0 0 563 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_37_3168)">
                        <path d="M1.5 1L561.5 1" stroke="var(--Neutrals-NeutralSlate200, #E9EAEB)" />
                    </g>
                    <defs>
                        <filter id="filter0_d_37_3168" x="0" y="0.5" width="563" height="4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                            <feFlood floodOpacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feOffset dy="1.5" />
                            <feGaussianBlur stdDeviation="0.75" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_37_3168" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_37_3168" result="shape" />
                        </filter>
                    </defs>
                </svg>
            </div>

            {/* Answer Section */}
            <div className="self-stretch inline-flex justify-start items-center gap-3">
                <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
                <div className="flex-1">
                    <textarea
                        value={answer}
                        onChange={(e) => onAnswerChange?.(e.target.value)}
                        placeholder="Type your answer...."
                        className="w-full bg-transparent outline-none resize-none text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 min-h-[100px]"
                    />
                </div>
            </div>

            {/* Navigation */}
            {showNavigation && (
                <div className="inline-flex justify-start items-center gap-3">
                    {onBack && (
                        <button
                            onClick={onBack}
                            className="px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
                        >
                            <div data-svg-wrapper className="relative">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13 15L8 10L13 5" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                            <div className="px-1 flex justify-center items-center">
                                <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
                                    {backLabel}
                                </div>
                            </div>
                        </button>
                    )}

                    {onNext && (
                        <button
                            onClick={onNext}
                            className="px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
                        >
                            <div className="px-1 flex justify-center items-center">
                                <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">
                                    {nextLabel}
                                </div>
                            </div>
                            <div data-svg-wrapper className="relative">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 15L13 10L8 5" stroke="var(--Neutrals-NeutralSlate0, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                        </button>
                    )}
                </div>
            )}
        </div>
    );
};

export default FigmaQuestion;