from dash import html, dcc

def create_metric_card(label, value, bg_color):
    return html.Div([
        html.Div(label, style={
            'fontSize': '13px',
            'color': '#555',
            'fontWeight': '500',
            'marginBottom': '4px',
            'whiteSpace': 'nowrap'
        }),
        html.Div(value, style={
            'fontSize': '15px',
            'fontWeight': 'bold',
            'color': '#2c3e50'
        })
    ], style={
        'padding': '12px',
        'backgroundColor': bg_color,
        'borderRadius': '8px',
        'boxShadow': '0 1px 3px rgba(0,0,0,0.1)',
        'textAlign': 'center',
        'minWidth': '150px'
    })

def date_range_picker():
    return html.Div([
        html.Label("Select Date Range:", style={'marginRight': '10px'}),
        dcc.DatePickerRange(
            id='date-range-picker',
            start_date=None,
            end_date=None
        ),
        html.Button('Apply', id='apply-date-range', n_clicks=0,
            style={'marginLeft': '10px', 'backgroundColor': '#1f77b4', 'color': 'white', 'border': 'none', 'padding': '5px 15px', 'borderRadius': '4px'}),
        html.Button('Reset', id='reset-date-range', n_clicks=0,
            style={'marginLeft': '10px', 'backgroundColor': '#7f7f7f', 'color': 'white', 'border': 'none', 'padding': '5px 15px', 'borderRadius': '4px'})
    ], style={'marginBottom': '20px'})