import { useState } from "react";

export default function Translator() {
  const [text, setText] = useState("");
  const [translation, setTranslation] = useState("");
  const [loading, setLoading] = useState(false);

  const translateText = async () => {
    if (!text) return;
    setLoading(true);

    const response = await fetch(
      "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-en-uk",
      {
        method: "POST",
        headers: {
          "Authorization": `Bearer YOUR_HUGGINGFACE_API_KEY`, // Replace with your API key
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ inputs: text }),
      }
    );

    const data = await response.json();
    setTranslation(data[0]?.translation_text || "Translation failed.");
    setLoading(false);
  };

  return (
    <div className="flex flex-col items-center min-h-screen bg-gray-100 p-6">
      <h1 className="text-3xl font-bold mb-4">English to Ukrainian Translator</h1>
      <textarea
        className="w-full max-w-md p-3 border border-gray-300 rounded-md shadow-md"
        placeholder="Enter English text..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button
        onClick={translateText}
        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700"
      >
        {loading ? "Translating..." : "Translate"}
      </button>
      {translation && (
        <div className="mt-4 p-4 bg-white rounded-lg shadow-md max-w-md">
          <h2 className="text-xl font-semibold">Translation:</h2>
          <p className="mt-2 text-gray-700">{translation}</p>
        </div>
      )}
    </div>
  );
}