/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useEffect } from 'react';
import { useRef } from 'react';
import { useState } from 'react';

import { PlayIcon } from '@/icons';

// Add this new component
interface LoadingSongCardProps {
  imageUrl: string;
  loadingDuration?: number; // in milliseconds, defaults to 30000 (30 seconds)
  onLoadingComplete?: () => void;
  onClick?: () => void;
}

export const LoadingSongCard = ({
  imageUrl,
  loadingDuration = 3000,
  onLoadingComplete,
  onClick,
}: LoadingSongCardProps) => {
  const [isLoading, setIsLoading] = useState(true);

  // Use useRef to track if this is the first mount
  const isFirstMount = useRef(true);

  useEffect(() => {
    // Only run the timer if this is the first mount
    if (isFirstMount.current) {
      isFirstMount.current = false;

      setTimeout(() => {
        setIsLoading(false);
        onLoadingComplete?.();
      }, loadingDuration);
    }
  }, []); // Empty dependency array since we only want this to run once

  return (
    <div
      className='relative flex-1 overflow-hidden rounded-[12px]'
      onClick={onClick}
    >
      {isLoading ? (
        <div className='absolute inset-0 z-10 flex items-center justify-center'>
          <img
            src='https://cdn-o.suno.com/spin-loader-white.png'
            alt='Loading spinner'
            className='h-[40px] w-[40px] animate-spin'
          />
        </div>
      ) : (
        <div className='absolute inset-0 z-10 flex cursor-pointer items-center justify-center'>
          <PlayIcon
            className='text-white'
            width={24}
            height={24}
            onClick={onClick}
          />
        </div>
      )}
      <div className='relative'>
        <img
          src={imageUrl}
          className='h-[176px] w-[128px]'
          style={{
            background: `linear-gradient(0deg, rgba(16, 16, 18, 0.40) 0%, rgba(16, 16, 18, 0.40) 100%), url(${imageUrl}) lightgray 50% / cover no-repeat`,
            filter: 'blur(22px)',
          }}
          alt='Song artwork'
        />
      </div>
    </div>
  );
};