@use 'sass:map';

// Default configuration for the filter theme
$default-filter-config: (
    // Button Trigger
    btn-bg: #ffffff,
    btn-border: 1px solid #e0e0e0,
    btn-radius: 4px,
    btn-text-color: #333,
    btn-hover-bg: #f5f5f5,
    btn-active-bg: #e3f2fd,
    btn-active-text: #1976d2,
    btn-badge-bg: #f44336,
    btn-badge-text: #fff,

    // Panel / Sidebar
    panel-bg: #ffffff,
    panel-border: 1px solid #e0e0e0,
    panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
    panel-width: 320px,
    panel-min-width: 480px,
    panel-header-bg: #fafafa,
    panel-header-text: #333,
    panel-padding: 1rem,
    panel-radius: 8px,
    panel-header-height: 48px,

    // Tabs
    tab-bg: transparent,
    tab-text: #666,
    tab-active-bg: #fff,
    tab-active-text: #1976d2,
    tab-border-bottom: 2px solid #1976d2,

    // Content
    section-title: #333,
    option-text: #555,
    option-hover-bg: #f9f9f9,

    // Footer actions
    footer-bg: #fff,
    footer-border-top: 1px solid #e0e0e0,
    action-primary-bg: #1976d2,
    action-primary-text: #fff,
    action-secondary-text: #666
);

@mixin filter-theme($user-config: ()) {
    $config: map.merge($default-filter-config, $user-config);

    // Button Trigger
    --cc-filter-btn-bg: #{map.get($config, btn-bg)};
    --cc-filter-btn-border: #{map.get($config, btn-border)};
    --cc-filter-btn-radius: #{map.get($config, btn-radius)};
    --cc-filter-btn-text-color: #{map.get($config, btn-text-color)};
    --cc-filter-btn-hover-bg: #{map.get($config, btn-hover-bg)};
    --cc-filter-btn-active-bg: #{map.get($config, btn-active-bg)};
    --cc-filter-btn-active-text: #{map.get($config, btn-active-text)};
    --cc-filter-btn-badge-bg: #{map.get($config, btn-badge-bg)};
    --cc-filter-btn-badge-text: #{map.get($config, btn-badge-text)};

    // Panel
    --cc-filter-panel-bg: #{map.get($config, panel-bg)};
    --cc-filter-panel-border: #{map.get($config, panel-border)};
    --cc-filter-panel-shadow: #{map.get($config, panel-shadow)};
    --cc-filter-panel-width: #{map.get($config, panel-width)};
    --cc-filter-panel-min-width: #{map.get($config, panel-min-width)};
    --cc-filter-panel-padding: #{map.get($config, panel-padding)};
    --cc-filter-panel-header-bg: #{map.get($config, panel-header-bg)};
    --cc-filter-panel-header-text: #{map.get($config, panel-header-text)};
    --cc-filter-panel-radius: #{map.get($config, panel-radius)};
    --cc-filter-panel-header-height: #{map.get($config, panel-header-height)};

    // Tabs
    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
    --cc-filter-tab-text: #{map.get($config, tab-text)};
    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
    --cc-filter-tab-active-text: #{map.get($config, tab-active-text)};
    --cc-filter-tab-border-bottom: #{map.get($config, tab-border-bottom)};

    // Content
    --cc-filter-section-title: #{map.get($config, section-title)};
    --cc-filter-option-text: #{map.get($config, option-text)};
    --cc-filter-option-hover-bg: #{map.get($config, option-hover-bg)};

    // Footer
    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
    --cc-filter-footer-border-top: #{map.get($config, footer-border-top)};
    --cc-filter-action-primary-bg: #{map.get($config, action-primary-bg)};
    --cc-filter-action-primary-text: #{map.get($config, action-primary-text)};
    --cc-filter-action-secondary-text: #{map.get($config, action-secondary-text)};
}