import { useRef, useState, useEffect } from 'react';
import { cn } from '@/lib/utils';

interface Track {
  title?: string;
  artist?: string;
  cover?: string;
}

interface AudioPlayerTrackInfoProps {
  track: Track;
}

export function AudioPlayerTrackInfo({ track }: AudioPlayerTrackInfoProps) {
  const titleRef = useRef<HTMLParagraphElement>(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  useEffect(() => {
    const el = titleRef.current;
    if (el) {
      setIsOverflowing(el.scrollWidth > el.clientWidth);
    }
  }, [track.title]);

  return (
    <div className="flex items-center gap-3 min-w-0">
      {track.cover && (
        <img
          src={track.cover}
          alt={track.title ?? ''}
          className="w-10 h-10 rounded object-cover shrink-0"
        />
      )}
      <div className="min-w-0 flex-1">
        <div className="overflow-hidden">
          <p
            ref={titleRef}
            className={cn(
              'text-sm font-medium text-foreground whitespace-nowrap',
              isOverflowing
                ? 'animate-marquee'
                : 'truncate',
            )}
          >
            {track.title}
          </p>
        </div>
        <p className="text-xs text-muted-foreground truncate">{track.artist}</p>
      </div>
    </div>
  );
}