import React, { useId } from "react";
import { Box, Paper } from "@mui/material";

import { PageHeader } from "./PageLayout";

// Public auth pages own their forms, commands and token lifecycles.
export default function AuthPageFrame({ title, description, children }: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  const titleId = useId();
  return (
    <Box component="main" aria-labelledby={titleId} sx={{
      minHeight: "100svh", display: "grid", placeItems: "center", boxSizing: "border-box",
      p: "var(--app-page-gutter, 16px)", bgcolor: "background.default",
    }}>
      <Paper elevation={0} sx={{
        width: "100%", maxWidth: 520, minWidth: 0, boxSizing: "border-box",
        p: "var(--app-card-padding, 16px)", border: "1px solid", borderColor: "divider",
      }}>
        <PageHeader title={title} titleId={titleId} description={description} />
        <Box sx={{ mt: "var(--app-section-gap, 24px)", minWidth: 0 }}>{children}</Box>
      </Paper>
    </Box>
  );
}