import { useState } from "react";
import "./PasswordPrompt.css";

export default function PasswordPrompt({ onAuthenticated }) {
  const [password, setPassword] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/post/authenticate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ password }),
    });
    const data = await res.json();
    if (res.ok) {
      onAuthenticated();
    } else {
      alert(data.message);
    }
  };

  return (
    <div className="password-prompt">
      <form onSubmit={handleSubmit}>
        <label>Access Code</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">
          <span className="material-symbols-outlined">login</span>Submit
        </button>
      </form>
    </div>
  );
}