import React, { useState } from "react";

export default function Account() {
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="container my-5">
      <div className="row justify-content-center">
        <div className="col-md-6 bg-secondary p-4 rounded bg-custom-dark">
          <form id="loginForm" onSubmit={handleSubmit}>
            <h2 className="text-center mb-4">
              <i className="bi bi-person-circle me-2"></i>Вход в систему
            </h2>

            <div className="mb-3">
              <label htmlFor="number" className="form-label">
                <i className="bi bi-telephone-fill me-2"></i>Номер телефона
              </label>
              <input
                type="tel"
                className="form-control"
                id="number"
                name="number_acc"
                placeholder="+7 (___) ___-__-__"
                required
                value={phone}
                onChange={e => setPhone(e.target.value)}
              />
            </div>

            <div className="mb-4">
              <label htmlFor="password" className="form-label">
                <i className="bi bi-lock-fill me-2"></i>Пароль
              </label>
              <input
                type="password"
                className="form-control"
                id="password"
                name="password_acc"
                placeholder="Пароль"
                required
                minLength="4"
                value={password}
                onChange={e => setPassword(e.target.value)}
              />
            </div>

            <div className="d-grid">
              <button type="submit" className="btn btn-warning">
                <i className="bi bi-box-arrow-in-right me-2"></i>Войти
              </button>
            </div>
            {submitted && (
              <div className="mt-3 alert alert-info p-2">
                <i className="bi bi-info-circle me-2"></i>Проверка формы: пока без логики!
              </div>
            )}
          </form>
        </div>
      </div>
    </div>
  );
}
