/**
 * Contact Card Preview Component
 * 
 * Preview of a contact card as it would appear in chat.
 * Uses the shared ContactCard component.
 * 
 * @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 { ContactCard } from '@shared/components/widgets/ContactCard';
import type { 
    PresetGlobalValues, 
    ContactCardWidgetSettings,
} from '../../../types/appearance';

interface ContactCardPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: ContactCardWidgetSettings | null;
    isRTL?: boolean;
    language?: string;
}

export const ContactCardPreview: React.FC<ContactCardPreviewProps> = ({ 
    globalValues,
    widgetSettings,
    isRTL = true,
    language,
}) => {
    return (
        <div className="preview-contact-card" style={{ maxWidth: '280px', width: '100%' }}>
            <ContactCard
                globalValues={globalValues as any}
                widgetSettings={widgetSettings as any}
                context="preview"
                isRTL={isRTL}
                language={language}
            />
        </div>
    );
};

export default ContactCardPreview;
