import React from 'react';

const EquipmentDetails = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Equipment Details: PT6C-67C</h3>
                <button className="btn-secondary">Back to List</button>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 1fr', gap: '2rem' }}>
                    <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                        <h4 style={{ marginBottom: '1rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '0.5rem' }}>General Information</h4>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Part Number</label>
                                <div>PT6C-67C</div>
                            </div>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Serial Number</label>
                                <div>E-12345</div>
                            </div>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Description</label>
                                <div>Turboshaft Engine</div>
                            </div>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Manufacturer</label>
                                <div>Pratt & Whitney</div>
                            </div>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Location</label>
                                <div>Installed on 9M-WSA</div>
                            </div>
                            <div>
                                <label style={{ color: 'var(--text-secondary)' }}>Position</label>
                                <div>ENG #1</div>
                            </div>
                        </div>
                    </div>

                    <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                        <h4 style={{ marginBottom: '1rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '0.5rem' }}>Life Limits & Counters</h4>
                        <div style={{ marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                                <span>Total Time Since New (TTSN)</span>
                                <strong>1,245.5 hrs</strong>
                            </div>
                            <div style={{ height: '8px', background: '#333', borderRadius: '4px', overflow: 'hidden' }}>
                                <div style={{ width: '60%', height: '100%', background: '#3498db' }}></div>
                            </div>
                        </div>
                        <div style={{ marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                                <span>Total Cycles Since New (TCSN)</span>
                                <strong>3,450</strong>
                            </div>
                            <div style={{ height: '8px', background: '#333', borderRadius: '4px', overflow: 'hidden' }}>
                                <div style={{ width: '45%', height: '100%', background: '#9b59b6' }}></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EquipmentDetails;
