import React from 'react';

const DailyUpdate = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Daily Update</h3>
                <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Date: {new Date().toLocaleDateString()}</div>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                    <h4>Fleet Status Summary</h4>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem', marginTop: '1rem' }}>
                        <div style={{ background: 'var(--bg-primary)', padding: '1rem', borderRadius: '4px', borderLeft: '4px solid #2ecc71' }}>
                            <div>Serviceable</div>
                            <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>12</div>
                        </div>
                        <div style={{ background: 'var(--bg-primary)', padding: '1rem', borderRadius: '4px', borderLeft: '4px solid #f1c40f' }}>
                            <div>Maintenance</div>
                            <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>2</div>
                        </div>
                        <div style={{ background: 'var(--bg-primary)', padding: '1rem', borderRadius: '4px', borderLeft: '4px solid #e74c3c' }}>
                            <div>AOG</div>
                            <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DailyUpdate;
