frontend/src/components/SeparateButton.tsx

interface SeparateButtonProps {
  onClick: () => void;
  disabled: boolean;
  stemCount: number;
}

export function SeparateButton({
  onClick,
  disabled,
  stemCount,
}: SeparateButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        w-full py-3 px-6 rounded-xl font-semibold text-base transition-all
        ${
          disabled
            ? "bg-bg-hover text-text-secondary cursor-not-allowed"
            : "bg-accent hover:bg-accent-hover text-white shadow-lg shadow-accent/25 hover:shadow-accent/40 active:scale-[0.98]"
        }
      `}
    >
      {stemCount === 0
        ? "Select stems to separate"
        : `Separate ${stemCount} stem${stemCount !== 1 ? "s" : ""}`}
    </button>
  );
}