frontend/src/components/GenerateButton.tsx

import { GenerateState } from '../types'

interface Props {
  state: GenerateState
  elapsed: number
  onGenerate: () => void
  onCancel: () => void
  disabled: boolean
}

export const GenerateButton = ({ state, elapsed, onGenerate, onCancel, disabled }: Props) => {
  const generating = state === "generating"

  return (
    <div className="flex flex-col gap-1">
      <button
        type="button"
        onClick={generating ? onCancel : onGenerate}
        disabled={!generating && disabled}
        className={`w-full rounded-md px-4 py-3 text-sm font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${
          generating
            ? "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500"
            : "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
        }`}
      >
        {generating ? "Cancel" : "Generate"}
      </button>
      {generating && (
        <div className="text-center text-sm text-gray-600">
          Generating... {elapsed}s elapsed
          {elapsed >= 10 && elapsed < 90 && (
            <span className="block text-xs text-gray-500">
              Long text can take up to 30s on M4 Mac
            </span>
          )}
          {elapsed >= 90 && (
            <span className="block text-xs text-amber-600 font-medium">
              This is taking unusually long. Check backend terminal.
            </span>
          )}
        </div>
      )}
    </div>
  )
}