veza/apps/web/src/features/player/components/TrackInfo.tsx

/**
 * Composant TrackInfo
 * Affiche les informations de la piste : titre, artiste, cover, métadonnées
 */

import { Music } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { Track } from '../types';

export interface TrackInfoProps {
  track: Track | null;
  className?: string;
  showCover?: boolean;
  showMetadata?: boolean;
  coverSize?: 'sm' | 'md' | 'lg';
}

export function TrackInfo({
  track,
  className,
  showCover = true,
  showMetadata = true,
  coverSize = 'md',
}: TrackInfoProps) {
  if (!track) {
    return (
      <div
        className={cn(
          'flex items-center gap-4 text-muted-foreground',
          className,
        )}
      >
        <Music className="h-5 w-5" aria-hidden="true" />
        <span>Aucune piste sélectionnée</span>
      </div>
    );
  }

  const coverSizes = {
    sm: 'h-12 w-12',
    md: 'h-16 w-16',
    lg: 'h-24 w-24',
  };

  return (
    <div className={cn('flex items-center gap-4', className)}>
      {/* Cover */}
      {showCover && (
        <div className="flex-shrink-0">
          {track.cover ? (
            <img
              src={track.cover}
              alt={`Cover de ${track.title}`}
              className={cn(
                coverSizes[coverSize],
                'rounded-lg object-cover bg-muted',
              )}
            />
          ) : (
            <div
              className={cn(
                coverSizes[coverSize],
                'rounded-lg bg-muted flex items-center justify-center',
              )}
            >
              <Music
                className={cn(
                  coverSize === 'sm'
                    ? 'h-6 w-6'
                    : coverSize === 'lg'
                      ? 'h-12 w-12'
                      : 'h-8 w-8',
                  'text-muted-foreground',
                )}
                aria-hidden="true"
              />
            </div>
          )}
        </div>
      )}

      {/* Track Info */}
      <div className="flex-1 min-w-0">
        <h3
          className="text-sm font-semibold text-foreground truncate"
          title={track.title}
        >
          {track.title}
        </h3>
        {track.artist && (
          <p
            className="text-xs text-muted-foreground truncate"
            title={track.artist}
          >
            {track.artist}
          </p>
        )}

        {/* Metadata */}
        {showMetadata && (
          <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
            {track.album && (
              <span className="truncate" title={track.album}>
                {track.album}
              </span>
            )}
            {track.album && track.genre && (
              <span className="text-muted-foreground" data-testid="metadata-separator">•</span>
            )}
            {track.genre && (
              <span className="truncate" title={track.genre}>
                {track.genre}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

export default TrackInfo;