import { useLastFm } from '@/hooks/use-lastfm.ts';
import clsx from 'clsx';

export default function LastFM() {
  const { track, loading, error } = useLastFm();

  if (loading) return (
    <div className="surface">
      <div className='skeleton h-6 w-32 mb-2' />
      <div className=' flex gap-3 items-center'>
        <div className='skeleton size-16 rounded-full' />
        <div className='skeleton h-4 w-32' />
      </div>
    </div>
  )
  if (!track) return null;
  if (error) return null;

  return (
    <div className="surface">
      <h2 className="text-2xl mb-2">
        {track.nowplaying ? "Now playing" : "Recently Played"}
      </h2>
      <div className="flex gap-3 items-center">
        <img src={track.image}
          className={clsx(track.nowplaying && 'animate-spin [animation-duration:5s]', 'rounded-full')}
        />
        <a href={track.url}>
          {track.name} by {track.artist}
        </a>
      </div>
    </div>
  )
}