frontend/src/components/StemRow.tsx

import { STEM_CONFIG } from "../types";
import { WaveformPlayer } from "./WaveformPlayer";

interface StemRowProps {
  name: string;
  audioUrl: string;
  onDownload: () => void;
}

export function StemRow({ name, audioUrl, onDownload }: StemRowProps) {
  const config = STEM_CONFIG[name] || { color: "#888", label: name };

  return (
    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 bg-bg-card rounded-xl p-3 md:p-4">
      {/* Label */}
      <div className="flex items-center gap-2 sm:w-24 flex-shrink-0">
        <span
          className="w-2.5 h-2.5 rounded-full flex-shrink-0"
          style={{ backgroundColor: config.color }}
        />
        <span
          className="text-sm font-semibold"
          style={{ color: config.color }}
        >
          {config.label}
        </span>
      </div>

      {/* Player */}
      <div className="flex-grow min-w-0">
        <WaveformPlayer
          url={audioUrl}
          color={config.color}
          height={48}
          instanceId={`stem-${name}`}
          onDownload={onDownload}
        />
      </div>
    </div>
  );
}