/**
 * Survey Preview Component
 * 
 * Preview of a survey/rating widget as it would appear in chat.
 * Uses the shared Survey component for parity with live view.
 * 
 * @since 1.5.0
 * @updated 1.6.0 - Migrated to shared component
 * @updated 1.8.0 - Added language prop for multilingual preview
 */

import React from 'react';
import { Survey } from '@shared/components/widgets/Survey';
import type { PresetGlobalValues, SurveyWidgetSettings } from '../../../types/appearance';
import { getWidgetStrings } from '@shared/utils/widget-strings';

interface SurveyPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: SurveyWidgetSettings | null;
    ratingType?: 'stars' | 'numbers' | 'emojis' | 'thumbs';
    isRTL?: boolean;
    language?: string;
}

export const SurveyPreview: React.FC<SurveyPreviewProps> = ({ 
    globalValues,
    widgetSettings,
    ratingType = 'stars',
    isRTL = true,
    language,
}) => {
    const ws = getWidgetStrings(language);

    return (
        <div style={{ maxWidth: ratingType === 'numbers' ? '320px' : '280px', width: '100%' }}>
            <Survey
                globalValues={globalValues as any}
                widgetSettings={widgetSettings as any}
                context="preview"
                isRTL={isRTL}
                language={language}
                config={{
                    title: ws.surveyTitle,
                    question: ws.surveyQuestion,
                    type: ratingType,
                    max_rating: ratingType === 'numbers' ? 10 : 5,
                    show_feedback: true,
                    feedback_placeholder: ws.surveyFeedbackPlaceholder,
                    submit_text: ws.surveySubmit,
                    success_message: ws.surveySuccess,
                }}
            />
        </div>
    );
};

export default SurveyPreview;
