import { FunctionComponent, ReactNode } from 'react';
import { AppBar, Box, Toolbar, Typography } from '@mui/material';

interface Props {
  endNode?: ReactNode;
  startNode?: ReactNode;
  title?: string;
  /** Overrides `title` with arbitrary content (e.g. the brand lockup on the customer home). */
  titleNode?: ReactNode;
  /** 'start' for a breadcrumb-style label (sidebar shells); 'center' for the customer shell. */
  align?: 'start' | 'center';
  /** An optional second row under the main one (the customer shell's desktop top-nav tabs). */
  secondaryRow?: ReactNode;
}

/**
 * Renders TopBar composition
 * @component TopBar
 */
const TopBar: FunctionComponent<Props> = ({ endNode, startNode, title = '', titleNode, align = 'center', secondaryRow }) => {
  return (
    <AppBar component="div">
      <Toolbar disableGutters sx={{ paddingInline: 1, gap: 1 }}>
        {startNode}

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

        {endNode}
      </Toolbar>
      {secondaryRow}
    </AppBar>
  );
};

export default TopBar;
