import { FunctionComponent, ReactNode } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { TOP_BAR_HEIGHT } from '../config';

interface Props {
  endNode?: ReactNode;
  startNode?: ReactNode;
  title?: string;
  /** Overrides `title` with arbitrary content (e.g. the brand lockup on a root tab). */
  titleNode?: ReactNode;
  /** 'start' for a breadcrumb-style label on a pushed route; 'center' for a root tab. */
  align?: 'start' | 'center';
}

/**
 * The frame's top row. Deliberately **not** an `AppBar`: no filled surface, no bottom rule, no
 * elevation — it sits directly on `background.default` and reads as part of the page rather than a
 * bar covering the top of it. On a 480px frame a solid header band is a large, permanent slab of
 * chrome above content that is already only ~50 characters wide.
 *
 * It is also a plain flex sibling of the scrolling `<main>` inside `AppFrame`, never a fixed
 * overlay — which is what keeps it inside the phone-width column on a wide window and removes the
 * per-shell top-offset math the fixed version needed.
 * @component TopBar
 */
const TopBar: FunctionComponent<Props> = ({ endNode, startNode, title = '', titleNode, align = 'center' }) => (
  <Stack
    direction="row"
    sx={{ alignItems: 'center', gap: 0.5, minHeight: TOP_BAR_HEIGHT, paddingInline: 1 }}
  >
    {startNode}

    <Box sx={{ flexGrow: 1, minWidth: 0, textAlign: align }}>
      {titleNode ?? (
        <Typography variant="subtitle1" component="h1" noWrap sx={{ display: 'block', fontWeight: 700 }}>
          {title}
        </Typography>
      )}
    </Box>

    {endNode}
  </Stack>
);

export default TopBar;
