/* Examples of using ui-contrast-color function in UI Library */

@use 'sass:color';
@use 'theme-mixins' as theme;

/* Example 1: Basic usage with predefined colors */
.example-button {
  $button-bg: #007bff; // Blue background
  $light-text: #ffffff; // White text for dark backgrounds
  $dark-text: #333333;  // Dark text for light backgrounds
  
  background-color: $button-bg;
  color: theme.ui-contrast-color($button-bg, $light-text, $dark-text);
  // Result: white text because blue is darker than 50% lightness
}

/* Example 2: Using with theme variables */
.example-card {
  $card-bg: var(--ui-color-primary);
  
  // In SCSS context, you need to use actual color values
  $primary-color: #2c3e50; // This would come from your theme
  $text-light: #ffffff;
  $text-dark: #333333;
  
  background-color: $primary-color;
  color: theme.ui-contrast-color($primary-color, $text-light, $text-dark);
  // Result: white text because #2c3e50 is dark
}

/* Example 3: Status colors with automatic contrast */
.status-examples {
  .success-badge {
    $success: #28a745; // Green
    $light: #ffffff;
    $dark: #000000;
    
    background-color: $success;
    color: theme.ui-contrast-color($success, $light, $dark);
    // Result: white text because green is relatively dark
  }
  
  .warning-badge {
    $warning: #ffc107; // Yellow
    $light: #ffffff;
    $dark: #000000;
    
    background-color: $warning;
    color: theme.ui-contrast-color($warning, $light, $dark);
    // Result: black text because yellow is light (>50% lightness)
  }
  
  .danger-badge {
    $danger: #dc3545; // Red
    $light: #ffffff;
    $dark: #000000;
    
    background-color: $danger;
    color: theme.ui-contrast-color($danger, $light, $dark);
    // Result: white text because red is dark
  }
  
  .info-badge {
    $info: #17a2b8; // Cyan
    $light: #ffffff;
    $dark: #000000;
    
    background-color: $info;
    color: theme.ui-contrast-color($info, $light, $dark);
    // Result: white text because cyan is dark
  }
}

/* Example 4: Using with different light/dark colors based on theme */
.theme-aware-component {
  // For light theme
  $bg-light: #f8f9fa;
  $text-light: #333333;
  $bg-dark: #343a40;
  $text-dark: #ffffff;
  
  // Component background
  $component-bg: #007bff;
  
  // In light theme context
  &.light-theme {
    background-color: $component-bg;
    color: theme.ui-contrast-color($component-bg, $text-dark, $text-light);
    // For light theme: if bg is light, use dark text; if bg is dark, use light text
  }
  
  // In dark theme context
  &.dark-theme {
    background-color: $component-bg;
    color: theme.ui-contrast-color($component-bg, $text-dark, $bg-light);
    // For dark theme: if bg is light, use light bg color; if bg is dark, use dark text
  }
}

/* Example 5: Dynamic contrast with CSS variables (conceptual) */
/*
Note: The ui-contrast-color function works at compile time with SCSS variables.
For runtime CSS variables, you would use the pre-computed contrast variables:

.dynamic-component {
  background-color: var(--ui-color-primary);
  color: var(--ui-color-primary-contrast);
  
  // Or with RGB for transparency:
  background-color: rgba(var(--ui-color-primary-rgb), 0.8);
  color: var(--ui-color-primary-contrast);
}
*/

/* Example 6: Complex usage with mixed colors */
.complex-example {
  $base-colors: (
    'primary': #2c3e50,
    'secondary': #6c757d,
    'light': #f8f9fa,
    'dark': #343a40
  );
  
  $text-light: #ffffff;
  $text-dark: #333333;
  
  @each $name, $color in $base-colors {
    .#{$name}-variant {
      background-color: $color;
      color: theme.ui-contrast-color($color, $text-light, $text-dark);
      
      // Border with semi-transparent contrast color
      $contrast: theme.ui-contrast-color($color, $text-light, $text-dark);
      border: 2px solid rgba($contrast, 0.3);
    }
  }
}

/* How the function works:
 * 
 * ui-contrast-color($base-color, $light-color, $dark-color)
 * 
 * 1. Calculates lightness of $base-color using HSL color space
 * 2. If lightness > 50% (closer to white): returns $dark-color
 * 3. If lightness ≤ 50% (closer to black): returns $light-color
 * 
 * This ensures optimal contrast for readability:
 * - Light backgrounds get dark text
 * - Dark backgrounds get light text
 */