app/components/ASRResultDisplay.tsx

'use client';

import React from "react";

interface ASRResultDisplayProps {
  result: any;
  ready: boolean | null;
  task: string;
}

export const ASRResultDisplay = ({ result, ready }: ASRResultDisplayProps) => {
  
  if (ready === false) {
    return <div className="text-gray-400">Loading model...</div>;
  }
  if (!result) {
    return <div className="text-gray-400">No transcription yet.</div>;
  }
  if (result.error) {
    return <div className="text-red-500">Error: {result.error}</div>;
  }
  return (
    <div className="w-full text-lg text-gray-800 break-words">
      <span className="font-semibold">Transcript:</span>
      <div className="mt-2 bg-gray-100 p-3 rounded-lg">
        
        {result.text || "No text found."}
      </div>
    </div>
  );
};