/**
 * Generates a beautiful gradient SVG data URL using the full color palette
 * Based on gradients used in corporate marketing site animations
 * Each seed (post ID or index) will consistently return the same gradient
 */
export const getGradientUrl = (seed: string | number): string => {
  // Beautiful gradient combinations using the full palette from corporate marketing site
  // Colors match Tailwind's default palette (purple, pink, blue, green, orange, indigo)
  const gradients = [
    // Purple gradients (like from-purple-200 to-purple-300)
    ['rgb(233, 213, 255)', 'rgb(221, 214, 254)', 'rgb(196, 181, 253)'], // purple-200 to purple-300
    ['rgb(250, 232, 255)', 'rgb(251, 207, 232)', 'rgb(244, 114, 182)'], // pink-200 to pink-300 via pink-400
    // Blue gradients (like from-blue-200 to-blue-300)
    ['rgb(191, 219, 254)', 'rgb(147, 197, 253)', 'rgb(96, 165, 250)'], // blue-200 to blue-300 to blue-400
    // Green gradients (like from-green-200 to-green-300)
    ['rgb(187, 247, 208)', 'rgb(134, 239, 172)', 'rgb(74, 222, 128)'], // green-200 to green-300 to green-400
    // Pink to Purple (like from-pink-400 to-purple-500)
    ['rgb(244, 114, 182)', 'rgb(217, 70, 239)', 'rgb(168, 85, 247)'], // pink-400 to purple-500
    // Blue to Purple (like from-blue-500 to-purple-600)
    ['rgb(59, 130, 246)', 'rgb(147, 51, 234)', 'rgb(147, 51, 234)'], // blue-500 to purple-600
    // Indigo to Purple (like from-indigo-500 to-purple-600)
    ['rgb(99, 102, 241)', 'rgb(139, 92, 246)', 'rgb(147, 51, 234)'], // indigo-500 to purple-600
    // Orange gradients (like from-orange-200 to-orange-300)
    ['rgb(254, 215, 170)', 'rgb(253, 186, 116)', 'rgb(251, 146, 60)'], // orange-200 to orange-300 to orange-400
    // Purple to Pink (like from-purple-400 to-pink-400)
    ['rgb(192, 132, 252)', 'rgb(232, 121, 249)', 'rgb(244, 114, 182)'], // purple-400 to pink-400
    // Softer blue-green blend
    ['rgb(165, 243, 252)', 'rgb(103, 232, 249)', 'rgb(134, 239, 172)'], // cyan-300 to green-400
    // Warm pink-orange
    ['rgb(251, 207, 232)', 'rgb(254, 202, 202)', 'rgb(253, 186, 116)'], // pink-200 to orange-300
    // Cool indigo-blue
    ['rgb(199, 210, 254)', 'rgb(165, 180, 252)', 'rgb(129, 140, 248)'], // indigo-200 to indigo-400
  ];
  
  // Calculate consistent index from seed
  const index = typeof seed === 'string' 
    ? seed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % gradients.length
    : Number(seed) % gradients.length;
  
  const [color1, color2, color3] = gradients[index];
  
  // Generate SVG with gradient (diagonal like bg-gradient-to-br)
  const svg = `
    <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${index}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:${color1};stop-opacity:1" />
          <stop offset="50%" style="stop-color:${color2};stop-opacity:1" />
          <stop offset="100%" style="stop-color:${color3};stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="600" height="400" fill="url(#grad${index})" />
    </svg>
  `.trim();
  
  // Convert to base64 data URL
  return `data:image/svg+xml;base64,${btoa(svg)}`;
};

