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

export interface PageHeaderProps {
  /** Already-translated title (i18n is the caller's job — labels are keys). */
  title: string;
  /** Optional already-translated subtitle. */
  subtitle?: string;
  /** Optional action node (a button / filter) rendered end-aligned on desktop, wrapping on mobile. */
  actions?: ReactNode;
  /** Optional back-navigation target — renders an RTL-flippable chevron before the title. */
  backTo?: string;
  /** Already-translated accessible label for the back button (required when `backTo` is set). */
  backLabel?: string;
}

/**
 * The standard page header — title + optional subtitle, an end-aligned actions slot, and an optional
 * back affordance. The generalized, promoted form of `AdminPageHeader` (kept as a thin alias); every area
 * page hand-rolling its own `h5`/`h1` + subtitle block should adopt this instead. Presentational,
 * caller-owned i18n, RTL-safe (logical flex, the `back` icon mirrors automatically under `dir="rtl"`).
 * @component PageHeader
 */
const PageHeader: FunctionComponent<PageHeaderProps> = ({ title, subtitle, actions, backTo, backLabel }) => (
  <Stack direction="row" sx={{ gap: 2, alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap' }}>
    <Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start' }}>
      {backTo ? (
        <AppIconButton icon="back" to={backTo} title={backLabel} sx={{ mt: 0.25 }} iconProps={{ size: 20 }} />
      ) : null}
      <Box>
        <Typography variant="h5" component="h1" sx={{ fontWeight: 700 }}>
          {title}
        </Typography>
        {subtitle ? (
          <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
            {subtitle}
          </Typography>
        ) : null}
      </Box>
    </Stack>
    {actions ? <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>{actions}</Box> : null}
  </Stack>
);

export default PageHeader;
