import React, { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");
  const [prediction, setPrediction] = useState("");

  const handlePredict = async () => {
    const res = await fetch("/api/predict", {
      method: "POST",
      body: JSON.stringify({ input }),
      headers: { "Content-Type": "application/json" }
    });
    const data = await res.json();
    setPrediction(data.prediction);
  };

  return (
    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
      <h1>Stock Price Forecaster (LSTM)</h1>
      <input
        type="text"
        placeholder="Enter Ticker or Company Name"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        style={{ padding: "0.5rem", width: "300px" }}
      />
      <button onClick={handlePredict} style={{ marginLeft: "1rem", padding: "0.5rem" }}>Predict</button>
      {prediction && <p>Predicted Next Day Close: ${prediction}</p>}
    </div>
  );
}