import React from 'react';

const SearchAircrafts = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Search Aircrafts</h3>
                <div className="widget-actions">
                    <button className="btn-primary">Add New Aircraft</button>
                    <button className="btn-secondary">Export</button>
                </div>
            </div>
            <div className="widget-content">
                <div style={{ padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '8px', marginBottom: '1rem' }}>
                    <h4 style={{ marginBottom: '1rem' }}>Filters</h4>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
                        <input type="text" placeholder="Registration Number" style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} />
                        <input type="text" placeholder="Model" style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} />
                        <input type="text" placeholder="Serial Number" style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} />
                        <button className="btn-primary" style={{ justifySelf: 'start' }}>Search</button>
                    </div>
                </div>

                <div style={{ overflowX: 'auto' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '1rem' }}>
                        <thead>
                            <tr style={{ borderBottom: '1px solid var(--border-color)', textAlign: 'left' }}>
                                <th style={{ padding: '1rem' }}>Reg. #</th>
                                <th style={{ padding: '1rem' }}>Model</th>
                                <th style={{ padding: '1rem' }}>Serial #</th>
                                <th style={{ padding: '1rem' }}>Manufacturing Date</th>
                                <th style={{ padding: '1rem' }}>Status</th>
                                <th style={{ padding: '1rem' }}>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>9M-WSA</td>
                                <td style={{ padding: '1rem' }}>AW139</td>
                                <td style={{ padding: '1rem' }}>31001</td>
                                <td style={{ padding: '1rem' }}>2015-05-20</td>
                                <td style={{ padding: '1rem' }}><span style={{ padding: '0.25rem 0.5rem', borderRadius: '4px', background: 'rgba(46, 204, 113, 0.2)', color: '#2ecc71' }}>Active</span></td>
                                <td style={{ padding: '1rem' }}><button className="btn-sm">View</button></td>
                            </tr>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>9M-WSB</td>
                                <td style={{ padding: '1rem' }}>AW139</td>
                                <td style={{ padding: '1rem' }}>31002</td>
                                <td style={{ padding: '1rem' }}>2016-01-15</td>
                                <td style={{ padding: '1rem' }}><span style={{ padding: '0.25rem 0.5rem', borderRadius: '4px', background: 'rgba(46, 204, 113, 0.2)', color: '#2ecc71' }}>Active</span></td>
                                <td style={{ padding: '1rem' }}><button className="btn-sm">View</button></td>
                            </tr>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>9M-WSC</td>
                                <td style={{ padding: '1rem' }}>AW189</td>
                                <td style={{ padding: '1rem' }}>41005</td>
                                <td style={{ padding: '1rem' }}>2018-08-30</td>
                                <td style={{ padding: '1rem' }}><span style={{ padding: '0.25rem 0.5rem', borderRadius: '4px', background: 'rgba(231, 76, 60, 0.2)', color: '#e74c3c' }}>Maintenance</span></td>
                                <td style={{ padding: '1rem' }}><button className="btn-sm">View</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default SearchAircrafts;
