export const PlaceholderPage = ({ title }: { title: string }) => {
  return (
    <section className="stack">
      <h1>{title}</h1>
      <p className="muted">This page is part of the frontend foundation scaffold.</p>
    </section>
  );
};

export const NotFoundPage = () => {
  return (
    <section className="stack center-screen">
      <h1>404</h1>
      <p className="muted">The page you requested does not exist.</p>
    </section>
  );
};

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";

import { Icon } from "../components/icon";

export const LoginRedirectPage = () => {
  const nextPath = new URLSearchParams(window.location.search).get("next") ?? "/";
  const encodedNext = encodeURIComponent(nextPath);

  return (
    <section className="stack center-screen">
      <h1>Sign in required</h1>
      <p className="muted">You need to authenticate to access this section.</p>
      <a className="primary-button" href={`${API_BASE_URL}/auth/login?next=${encodedNext}`}>
        <Icon name="profile" size="sm" />
        Continue to login
      </a>
    </section>
  );
};