import ArtistInline from '@/components/ArtistsInline'
import Skeleton from '@/components/Skeleton'
import { resizeImage } from '@/utils/common'

const TrackListGrid = ({
  track,
  isSkeleton = false,
}: {
  track: Track
  isSkeleton: boolean
}) => {
  return (
    <div
      className={classNames(
        'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl',
        'grid-cols-1 py-1.5 px-2'
      )}
    >
      <div className='grid grid-cols-[3rem_auto] items-center'>
        {/* Cover */}
        <div>
          {!isSkeleton && (
            <img
              src={resizeImage(track.al.picUrl, 'xs')}
              className='box-content h-9 w-9 rounded-md border border-black border-opacity-[.03]'
            />
          )}
          {isSkeleton && (
            <Skeleton className='mr-4 h-9 w-9 rounded-md border border-gray-100' />
          )}
        </div>

        {/* Track name & Artists */}
        <div className='flex flex-col justify-center'>
          {!isSkeleton && (
            <div
              v-if='!isSkeleton'
              className='line-clamp-1 break-all text-base font-semibold'
            >
              {track.name}
            </div>
          )}
          {isSkeleton && (
            <Skeleton className='text-base'>PLACEHOLDER12345</Skeleton>
          )}

          <div className='text-xs'>
            {!isSkeleton && <ArtistInline artists={track.ar} />}
            {isSkeleton && (
              <Skeleton className='w-2/3 translate-y-px'>PLACE</Skeleton>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default TrackListGrid