import { useState } from "react";
import type { ApiSettings, LoginResponse } from "../../types";
import Button from "../../components/Button";
import LoginModal from "./LoginModal";

export default function PublicLandingPage({
  settings,
  maintenanceMode,
  onLogin




}: {settings: ApiSettings;maintenanceMode?: {enabled: boolean;message?: string | null;};onLogin: (response: LoginResponse) => void;}) {
  const [loginOpen, setLoginOpen] = useState(false);

  return (
    <div className="public-landing">
      <section className="public-card">
        <div className="public-kicker">i18n:govoplan-core.govoplan.a84c0a85</div>
        <h1>i18n:govoplan-core.modular_planning_tools_with_controlled_access.1d6b0743</h1>
        <p>
          i18n:govoplan-core.sign_in_to_open_the_modules_available_to_your_te.8bb7dab4
        </p>

        {maintenanceMode?.enabled &&
        <div className="public-maintenance alert warning">
            <strong>i18n:govoplan-core.maintenance_mode_is_active.70f918d9</strong>
            <span>{maintenanceMode.message || "i18n:govoplan-core.only_users_with_maintenance_access_can_use_the_s.5566264f"}</span>
          </div>
        }

        <div className="public-actions">
          <Button variant="primary" onClick={() => setLoginOpen(true)}>i18n:govoplan-core.sign_in.ada2e9e9</Button>
        </div>

        <div className="public-footnote">
          i18n:govoplan-core.access_is_restricted_sign_in_to_open_available_m.2a47a549
        </div>
      </section>

      {loginOpen &&
      <LoginModal
        settings={settings}
        onClose={() => setLoginOpen(false)}
        onLogin={(response) => {
          onLogin(response);
          setLoginOpen(false);
        }} />

      }
    </div>);

}