import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [query, setQuery] = useState("");
  const [output, setOutput] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchPrediction = async () => {
    setLoading(true);
    setOutput(null);

    const response = await fetch("https://your-space-url.hf.space/predict/", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query }),
    });

    const data = await response.json();
    setOutput(data.output);
    setLoading(false);
  };

  return (
    <div className="container">
      <h1 className="title">Luxury NER Extractor</h1>
      <p className="subtitle">Enter a sentence and extract structured data</p>

      <div className="input-section">
        <input
          type="text"
          placeholder="e.g. Luxury bags for women above $2000"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="input-box"
        />
        <button onClick={fetchPrediction} className="analyze-button">
          {loading ? "Analyzing..." : "Analyze"}
        </button>
      </div>

      {output && (
        <div className="output-section">
          <h2>Extracted Information</h2>
          <div className="result-box">
            {Object.entries(output).map(([key, value]) => (
              <div key={key} className="entity">
                <span className="entity-type">{key}</span>:{" "}
                <span className="entity-value">{value.join(", ")}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;