import React from 'react';

const Cockpit = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Cockpit / Flight Logs</h3>
                <button className="btn-primary">New Entry</button>
            </div>
            <div className="widget-content">
                <div style={{ overflowX: 'auto' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr style={{ background: 'rgba(0,0,0,0.2)', textAlign: 'left' }}>
                                <th style={{ padding: '1rem' }}>Flight Date</th>
                                <th style={{ padding: '1rem' }}>Aircraft</th>
                                <th style={{ padding: '1rem' }}>Sector</th>
                                <th style={{ padding: '1rem' }}>Block Time</th>
                                <th style={{ padding: '1rem' }}>Pilot</th>
                                <th style={{ padding: '1rem' }}>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>2025-01-13</td>
                                <td style={{ padding: '1rem' }}>9M-WSA</td>
                                <td style={{ padding: '1rem' }}>KUL-PEN</td>
                                <td style={{ padding: '1rem' }}>01:45</td>
                                <td style={{ padding: '1rem' }}>CAPT. JOHN</td>
                                <td style={{ padding: '1rem' }}><span style={{ color: '#2ecc71' }}>Verified</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default Cockpit;
