"use client";
import type { Song } from "@/lib/types";
import { Music, Check, Clock } from "lucide-react";

interface SongRowProps {
  song: Song;
  position?: number;
  showStatus?: boolean;
  action?: React.ReactNode;
}

function formatDuration(ms: number): string {
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

export default function SongRow({ song, position, showStatus = true, action }: SongRowProps) {
  return (
    <div className="flex items-center gap-3 px-4 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-lg group">
      {position !== undefined && (
        <span className="w-6 text-right text-xs text-zinc-400">{position}</span>
      )}
      {song.artwork_url ? (
        <img src={song.artwork_url} alt="" className="w-10 h-10 rounded object-cover" />
      ) : (
        <div className="w-10 h-10 rounded bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center">
          <Music className="w-4 h-4 text-zinc-400" />
        </div>
      )}
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">{song.title}</div>
        <div className="text-xs text-zinc-500 truncate">{song.artist}{song.album ? ` — ${song.album}` : ""}</div>
      </div>
      {showStatus && (
        <div className="flex items-center gap-1">
          {song.status === "captured" ? (
            <Check className="w-4 h-4 text-green-500" />
          ) : (
            <Clock className="w-4 h-4 text-zinc-400" />
          )}
        </div>
      )}
      <span className="text-xs text-zinc-400 w-12 text-right">{formatDuration(song.duration_ms)}</span>
      {action && <div className="opacity-0 group-hover:opacity-100 transition-opacity">{action}</div>}
    </div>
  );
}
