import React from 'react';

const StructureDuplication = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Structure Duplication</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', maxWidth: '600px', margin: '0 auto' }}>
                    <p style={{ color: 'var(--text-secondary)', marginBottom: '1rem' }}>
                        Rapidly initialize a new aircraft by copying the configuration/hierarchy of an existing one.
                    </p>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '1rem', alignItems: 'center' }}>
                        <div style={{ border: '1px solid var(--border-color)', padding: '1rem', borderRadius: '4px' }}>
                            <label>Source A/C</label>
                            <input type="text" placeholder="e.g 9M-WSA" style={{ width: '100%', marginTop: '0.5rem', padding: '0.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: 'none' }} />
                        </div>
                        <div>➡</div>
                        <div style={{ border: '1px solid var(--border-color)', padding: '1rem', borderRadius: '4px' }}>
                            <label>New A/C</label>
                            <input type="text" placeholder="e.g 9M-WSD" style={{ width: '100%', marginTop: '0.5rem', padding: '0.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: 'none' }} />
                        </div>
                    </div>
                    <button className="btn-primary" style={{ width: '100%', marginTop: '1.5rem' }}>Duplicate Structure</button>
                </div>
            </div>
        </div>
    );
};

export default StructureDuplication;
