'use client';

/**
 * SongsCatalogue — Displays a list/table of the user's registered songs.
 *
 * Each entry shows the song title and associated composer information.
 * Uses Divisi design system styling consistent with the rest of the portal.
 *
 * Requirements: 13.1, 13.2, 13.3
 */

import type { PortalSong } from '@/lib/mock-data/types';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface SongsCatalogueProps {
  songs: PortalSong[];
}

export default function SongsCatalogue({ songs }: SongsCatalogueProps) {
  const t = useTranslation();

  if (songs.length === 0) {
    return (
      <div className="rounded-xl border border-divisi-border bg-divisi-card p-6 text-center">
        <p className="text-sm text-divisi-text-secondary">
          {t.portal.noSongs}
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card overflow-hidden">
      {/* Table header */}
      <div className="grid grid-cols-[1fr_1fr_auto_auto] gap-4 border-b border-divisi-border bg-divisi-bg px-5 py-3">
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary">
          {t.portal.songTitle}
        </span>
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary">
          {t.portal.songComposers}
        </span>
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary hidden sm:block">
          {t.portal.songIswc}
        </span>
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary hidden sm:block">
          {t.portal.songRegistration}
        </span>
      </div>

      {/* Table rows */}
      <ul className="divide-y divide-divisi-border">
        {songs.map((song) => (
          <li
            key={song.id}
            className="grid grid-cols-[1fr_1fr_auto_auto] gap-4 px-5 py-3 hover:bg-divisi-bg/50 transition-colors"
          >
            <span className="text-sm font-medium text-divisi-text-primary truncate">
              {song.title}
            </span>
            <span className="text-sm text-divisi-text-secondary truncate">
              {song.composers.join(', ')}
            </span>
            <span className="text-xs text-divisi-text-secondary font-mono hidden sm:block">
              {song.iswc}
            </span>
            <span className="text-xs text-divisi-text-secondary hidden sm:block">
              {song.registrationDate.toLocaleDateString('es-CL', {
                year: 'numeric',
                month: 'short',
              })}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}