import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DateRangeSelector = ({ 
    startDate, 
    endDate, 
    onStartDateChange, 
    onEndDateChange, 
    onApply 
}) => {
    return (
        <div style={{ 
            marginTop: 10,
            backgroundColor: '#f5f5f5',
            padding: '15px',
            borderRadius: '4px'
        }}>
            <div style={{
                marginBottom: '10px',
                fontWeight: '500',
                color: '#555'
            }}>
                Укажите диапазон дат:
            </div>
            <div style={{
                display: 'flex',
                gap: '10px',
                flexWrap: 'wrap',
                alignItems: 'flex-end'
            }}>
                <div style={{ flex: '1 1 200px' }}>
                    <DatePicker
                        selected={startDate}
                        onChange={onStartDateChange}
                        showTimeSelect
                        timeFormat="HH:mm"
                        timeIntervals={15}
                        dateFormat="yyyy-MM-dd HH:mm"
                        placeholderText="Начальная дата"
                        customInput={
                            <input style={{
                                backgroundColor: '#f9f9f9',
                                color: "#555",
                                width: '100%',
                                padding: '8px 12px',
                                borderRadius: '4px',
                                border: '1px solid #ddd'
                            }} />
                        }
                    />
                </div>
                <div style={{ flex: '1 1 200px' }}>
                    <DatePicker
                        selected={endDate}
                        onChange={onEndDateChange}
                        showTimeSelect
                        timeFormat="HH:mm"
                        timeIntervals={15}
                        dateFormat="yyyy-MM-dd HH:mm"
                        placeholderText="Конечная дата"
                        customInput={
                            <input style={{
                                backgroundColor: '#f9f9f9',
                                color: "#555",
                                width: '100%',
                                padding: '8px 12px',
                                borderRadius: '4px',
                                border: '1px solid #ddd'
                            }} />
                        }
                    />
                </div>
                <button
                    onClick={onApply}
                    style={{
                        padding: '8px 16px',
                        backgroundColor: '#4a6baf',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        transition: 'background-color 0.2s',
                        flex: '0 0 auto',
                        height: '36px'
                    }}
                    onMouseOver={(e) => e.target.style.backgroundColor = '#3a5a9f'}
                    onMouseOut={(e) => e.target.style.backgroundColor = '#4a6baf'}
                >
                    Применить
                </button>
            </div>
        </div>
    );
};

export default DateRangeSelector;