import React from 'react';

const AircraftDetails = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Aircraft Details: 9M-WSA</h3>
                <div className="widget-actions">
                    <button className="btn-secondary">Back to List</button>
                    <button className="btn-primary">Edit</button>
                </div>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 2fr', gap: '2rem' }}>
                    <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                        <div style={{ width: '100%', height: '200px', background: '#333', borderRadius: '4px', marginBottom: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <span style={{ fontSize: '3rem' }}>🚁</span>
                        </div>
                        <h4 style={{ marginBottom: '1rem' }}>Basic Information</h4>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
                            <label style={{ color: 'var(--text-secondary)' }}>Registration:</label>
                            <span>9M-WSA</span>

                            <label style={{ color: 'var(--text-secondary)' }}>Model:</label>
                            <span>AW139</span>

                            <label style={{ color: 'var(--text-secondary)' }}>Serial Number:</label>
                            <span>31001</span>

                            <label style={{ color: 'var(--text-secondary)' }}>Status:</label>
                            <span style={{ color: '#2ecc71' }}>Active</span>

                            <label style={{ color: 'var(--text-secondary)' }}>Base:</label>
                            <span>Kuala Lumpur (WMKK)</span>
                        </div>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                            <h4 style={{ marginBottom: '1rem' }}>Operational Status</h4>
                            <p><strong>Total Hours:</strong> 1,245.5 hrs</p>
                            <p><strong>Total Cycles:</strong> 3,450</p>
                            <p><strong>Next Maintenance Due:</strong> 2026-02-15 (500H Inspection)</p>
                        </div>

                        <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px', flex: 1 }}>
                            <h4 style={{ marginBottom: '1rem' }}>Installed Equipment</h4>
                            <ul style={{ paddingLeft: '1.5rem' }}>
                                <li>Engine #1 (S/N: E-12345)</li>
                                <li>Engine #2 (S/N: E-12346)</li>
                                <li>Main Rotor Blade (S/N: MR-9988)</li>
                                <li>Tail Rotor Blade (S/N: TR-7766)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AircraftDetails;
