export const Dialogue = ({ dialogue }) => {
    if (!dialogue || !Array.isArray(dialogue) || dialogue.length === 0) {
        return null;
    }

    return (
        <div style={{ margin: '2rem 0' }}>
            {dialogue.map((message, index) => {
                const isWriter = message.role === 'writer' || message.role === 'assistant';
                const messageText = message.text || message.content || '';

                return (
                    <div
                        key={index}
                        style={{
                            display: 'flex',
                            justifyContent: isWriter ? 'flex-end' : 'flex-start',
                            marginBottom: '2rem',
                            padding: '1rem'
                        }}
                    >
                        <div
                            style={{
                                maxWidth: '75%',
                                display: 'flex',
                                flexDirection: isWriter ? 'row-reverse' : 'row',
                                alignItems: 'flex-start',
                                gap: '1rem'
                            }}
                        >
                            <div
                                style={{
                                    width: '50px',
                                    height: '50px',
                                    borderRadius: '50%',
                                    background: isWriter
                                        ? 'linear-gradient(135deg, #00CC8B 0%, #07C983 100%)'
                                        : 'linear-gradient(135deg, #07C983 0%, #00CC8B 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    fontSize: '1.5rem',
                                    flexShrink: 0
                                }}
                            >
                                {isWriter ? '🐱' : '👤'}
                            </div>

                            <div style={{ flex: 1 }}>
                                <div
                                    style={{
                                        fontSize: '0.75rem',
                                        fontWeight: '600',
                                        textTransform: 'uppercase',
                                        letterSpacing: '1px',
                                        marginBottom: '0.5rem',
                                        color: isWriter ? '#00CC8B' : '#07C983',
                                        textAlign: isWriter ? 'right' : 'left'
                                    }}
                                >
                                    {isWriter ? 'HAO' : 'You'}
                                </div>

                                <div
                                    style={{
                                        background: isWriter
                                            ? 'linear-gradient(135deg, rgba(0, 204, 139, 0.2) 0%, rgba(7, 201, 131, 0.1) 100%)'
                                            : 'linear-gradient(135deg, rgba(7, 201, 131, 0.2) 0%, rgba(0, 204, 139, 0.1) 100%)',
                                        backdropFilter: 'blur(10px)',
                                        borderRadius: isWriter ? '24px 8px 24px 24px' : '8px 24px 24px 24px',
                                        padding: '1.5rem',
                                        border: isWriter
                                            ? '2px solid rgba(0, 204, 139, 0.4)'
                                            : '2px solid rgba(7, 201, 131, 0.4)',
                                        boxShadow: isWriter
                                            ? '0 10px 30px rgba(0, 204, 139, 0.25)'
                                            : '0 10px 30px rgba(7, 201, 131, 0.25)',
                                        color: '#ffffff',
                                        fontSize: '1rem',
                                        lineHeight: '1.7'
                                    }}
                                >
                                    {messageText}
                                </div>
                            </div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};
