@use 'sass:map';

// Default configuration for the summary card theme (Theme 1 - Clean & Minimal)
$default-summary-card-config: (
    // Base
    font-family: ('Inter', sans-serif),
    bg-color: #ffffff,
    border-radius: 8px,
    border: 1px solid #e0e0e0,
    padding: 20px,
    shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    min-height: auto,
    transition-duration: 0.2s,

    // Hover States
    hover-transform: translateY(-2px),
    hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),

    // Disabled State
    disabled-opacity: 0.5,

    // Icon Section
    icon-box-size: 48px,
    icon-size: 24px,
    icon-radius: 8px,
    icon-bg: rgba(0, 0, 0, 0.05),
    icon-color: #666666,
    icon-margin: 1rem,

    // Content Section
    content-gap: 0.5rem,

    // Header
    header-size: 0.75rem,
    header-weight: 600,
    header-color: #6c757d,
    header-transform: uppercase,
    header-letter-spacing: 0.05em,
    header-line-height: 1.2,

    // Value
    value-size: 1.5rem,
    value-weight: 700,
    value-color: #333333,
    value-line-height: 1.2,

    // Description
    desc-size: 0.75rem,
    desc-weight: 400,
    desc-color: #6c757d,
    desc-line-height: 1.4,
    value-desc-gap: 0.25rem,

    // Meta Pill
    meta-pill-bg: #f1f5f9,
    meta-pill-color: #475569,
    meta-pill-padding: 4px 12px,
    meta-pill-radius: 20px,
    meta-pill-font-size: 0.75rem,
    meta-pill-font-weight: 600
);

// Theme 2 configuration (Aesthetic & Modern)
$theme-2-summary-card-config: (
    // Base
    font-family: ('Poppins', 'Segoe UI', sans-serif),
    bg-color: #ffffff,
    border-radius: 16px,
    border: none,
    padding: 28px,
    shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
    min-height: 120px,
    transition-duration: 0.3s,

    // Hover States
    hover-transform: translateY(-4px),
    hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),

    // Disabled State
    disabled-opacity: 0.4,

    // Icon Section
    icon-box-size: 56px,
    icon-size: 28px,
    icon-radius: 12px,
    icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%),
    icon-color: #6366f1,
    icon-margin: 1.25rem,

    // Content Section
    content-gap: 0.75rem,

    // Header
    header-size: 0.8rem,
    header-weight: 500,
    header-color: #94a3b8,
    header-transform: none,
    header-letter-spacing: 0.02em,
    header-line-height: 1.3,

    // Value
    value-size: 2rem,
    value-weight: 700,
    value-color: #1e293b,
    value-line-height: 1.1,

    // Description
    desc-size: 0.85rem,
    desc-weight: 400,
    desc-color: #64748b,
    desc-line-height: 1.5,
    value-desc-gap: 0.5rem,

    // Meta Pill
    meta-pill-bg: #f1f5f9,
    meta-pill-color: #475569,
    meta-pill-padding: 4px 12px,
    meta-pill-radius: 20px,
    meta-pill-font-size: 0.75rem,
    meta-pill-font-weight: 600
);

// Mixin to generate CSS variables for the summary card component
@mixin summary-card-theme($user-config: ()) {
    // Merge user config with defaults
    $config: map.merge($default-summary-card-config, $user-config);

    // Generate CSS Variables
    --cc-sc-font-family: #{map.get($config, font-family)};
    --cc-sc-bg-color: #{map.get($config, bg-color)};
    --cc-sc-border-radius: #{map.get($config, border-radius)};
    --cc-sc-border: #{map.get($config, border)};
    --cc-sc-padding: #{map.get($config, padding)};
    --cc-sc-shadow: #{map.get($config, shadow)};
    --cc-sc-min-height: #{map.get($config, min-height)};
    --cc-sc-transition-duration: #{map.get($config, transition-duration)};

    --cc-sc-hover-transform: #{map.get($config, hover-transform)};
    --cc-sc-hover-shadow: #{map.get($config, hover-shadow)};

    --cc-sc-disabled-opacity: #{map.get($config, disabled-opacity)};

    --cc-sc-icon-box-size: #{map.get($config, icon-box-size)};
    --cc-sc-icon-size: #{map.get($config, icon-size)};
    --cc-sc-icon-radius: #{map.get($config, icon-radius)};
    --cc-sc-icon-bg: #{map.get($config, icon-bg)};
    --cc-sc-icon-color: #{map.get($config, icon-color)};
    --cc-sc-icon-margin: #{map.get($config, icon-margin)};

    --cc-sc-content-gap: #{map.get($config, content-gap)};

    --cc-sc-header-size: #{map.get($config, header-size)};
    --cc-sc-header-weight: #{map.get($config, header-weight)};
    --cc-sc-header-color: #{map.get($config, header-color)};
    --cc-sc-header-transform: #{map.get($config, header-transform)};
    --cc-sc-header-letter-spacing: #{map.get($config, header-letter-spacing)};
    --cc-sc-header-line-height: #{map.get($config, header-line-height)};

    --cc-sc-value-size: #{map.get($config, value-size)};
    --cc-sc-value-weight: #{map.get($config, value-weight)};
    --cc-sc-value-color: #{map.get($config, value-color)};
    --cc-sc-value-line-height: #{map.get($config, value-line-height)};

    --cc-sc-desc-size: #{map.get($config, desc-size)};
    --cc-sc-desc-weight: #{map.get($config, desc-weight)};
    --cc-sc-desc-color: #{map.get($config, desc-color)};
    --cc-sc-desc-line-height: #{map.get($config, desc-line-height)};
    --cc-sc-value-desc-gap: #{map.get($config, value-desc-gap)};

    --cc-sc-meta-pill-bg: #{map.get($config, meta-pill-bg)};
    --cc-sc-meta-pill-color: #{map.get($config, meta-pill-color)};
    --cc-sc-meta-pill-padding: #{map.get($config, meta-pill-padding)};
    --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
    --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
    --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
}