import clsx from 'clsx';
import React from 'react';

import {
  NO_STYLE_FALLBACK,
  TYPOGRAPHY_DISCOVER_FEED_BODY_1_CLASSNAME,
  TYPOGRAPHY_DISCOVER_FEED_BODY_2_CLASSNAME,
} from '@/utils/constants';

import { SongFeedItemArtistTag } from '../feed/SongFeedItemData';

type SongQueueSongDataProps = {
  title: string;
  tags: string[];
  displayName: string;
  handle: string;
  imageUrl: string;
  personaId?: string;
  personaName?: string;
  personaImageUrl?: string;
  playCount: number;
  commentCount: number;
  clipId: string;
  onPlayClick: () => void;
  artistId: string;
};

export const SongQueueSongData = ({
  title,
  tags,
  displayName,
  handle,
  imageUrl,
  personaId,
  personaName,
  personaImageUrl,
  clipId,
  playCount,
  artistId,
}: SongQueueSongDataProps) => {
  return (
    <div className='flex flex-col gap-1'>
      <div className='flex flex-row items-center gap-1'>
        <div
          className={clsx(
            TYPOGRAPHY_DISCOVER_FEED_BODY_1_CLASSNAME,
            'line-clamp-1 cursor-pointer break-words text-foreground-primary'
          )}
        >
          <span className='line-clamp-1'>{title || 'Untitled'}</span>
        </div>
      </div>
      <div
        className={clsx(
          'line-clamp-1 gap-2 font-sans text-sm break-all text-foreground-tertiary text-secondary/90'
        )}
      >
        {tags.length ? <span>{tags}</span> : NO_STYLE_FALLBACK}
      </div>
      <div className='flex flex-row items-center gap-1 overflow-x-clip'>
        <SongFeedItemArtistTag
          className={clsx(
            TYPOGRAPHY_DISCOVER_FEED_BODY_2_CLASSNAME,
            'text-foreground-primary'
          )}
          displayName={displayName}
          handle={handle}
          imageUrl={imageUrl}
          personaId={personaId}
          personaDisplayName={personaName}
          personaImageUrl={personaImageUrl}
          clipId={clipId}
          index={0}
          playCount={playCount}
          likeCount={0}
          commentCount={0}
          listId='song-queue'
          listTitle='Song Queue'
          artistId={artistId}
        />
      </div>
    </div>
  );
};