'use client';

import React, { useState } from 'react';

const gradientSets = [
  ['#8B6EFE', '#02D95C'], // Purple → Green
  ['#02D95C', '#F5D907'], // Green → Yellow
  ['#FD429C', '#F5D907'], // Pink → Yellow
  ['#8B6EFE', '#F5D907'], // Purple → Yellow
  ['#1F8BFF', '#F5D907'], // Blue → Yellow
];

export const SongCellLoading: React.FC = () => {
  // Fix hydration issue: useState ensures random value is only computed on client
  const [gradientColors] = useState(
    () => gradientSets[Math.floor(Math.random() * gradientSets.length)]
  );

  return (
    <div className='flex items-center justify-between px-4 py-3'>
      <style>{`
        @keyframes shimmer-placeholder{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
        @keyframes gradient-shift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
      `}</style>
      <div className='flex items-center gap-4'>
        {/* SONG GENERATING: Artwork gradient aura animation */}
        <div
          className='relative flex h-[67px] w-[67px] flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-[-50%] before:h-[200%] before:w-[200%] before:[animation:gradient-shift_4s_ease_infinite] before:bg-[linear-gradient(45deg,var(--gradient-color-1),var(--gradient-color-2),var(--gradient-color-1),var(--gradient-color-2))] before:bg-[length:400%_400%]'
          style={
            {
              '--gradient-color-1': gradientColors[0],
              '--gradient-color-2': gradientColors[1],
            } as React.CSSProperties
          }
        />

        {/* SONG GENERATING: Lines shimmer for text placeholders */}
        <div className='flex flex-col gap-4'>
          {/* Title shimmer */}
          <div
            className='relative h-2 w-[104px] overflow-hidden rounded-full after:absolute after:inset-0 after:[animation:shimmer-placeholder_1.5s_infinite] after:bg-gradient-to-r after:from-transparent after:via-white/15 after:to-transparent'
            style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
          />
          {/* Subtitle shimmer */}
          <div
            className='relative h-2 w-[200px] overflow-hidden rounded-full after:absolute after:inset-0 after:[animation:shimmer-placeholder_1.5s_infinite] after:bg-gradient-to-r after:from-transparent after:via-white/15 after:to-transparent'
            style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
          />
        </div>
      </div>
    </div>
  );
};

export default SongCellLoading;