import PropTypes from 'prop-types';
import { Box, Stack, Typography } from '@mui/material';

// ==============================|| PAGE HEADER (Doormile-style clean title) ||============================== //
// A plain, un-boxed page title + optional live subtitle + an action slot
// (zone selector, primary button, etc.). Replaces the heavy boxed/gradient
// header so every operator page opens with a calm, corporate heading.

export default function PageHeader({ title, subtitle, live = false, action }) {
  return (
    <Stack
      direction={{ xs: 'column', sm: 'row' }}
      justifyContent="space-between"
      alignItems={{ xs: 'flex-start', sm: 'center' }}
      spacing={1.5}
      sx={{ mb: { xs: 2, md: 2.5 } }}
    >
      <Box sx={{ minWidth: 0 }}>
        <Typography variant="h3" sx={{ fontWeight: 700, letterSpacing: '-0.02em', color: 'grey.800' }}>
          {title}
        </Typography>
        {subtitle && (
          <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
            {live && (
              <Box
                sx={{
                  width: 7,
                  height: 7,
                  borderRadius: '50%',
                  bgcolor: 'success.main',
                  boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                }}
              />
            )}
            <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
              {subtitle}
            </Typography>
          </Stack>
        )}
      </Box>
      {action && <Box sx={{ flexShrink: 0, width: { xs: '100%', sm: 'auto' } }}>{action}</Box>}
    </Stack>
  );
}

PageHeader.propTypes = {
  title: PropTypes.node,
  subtitle: PropTypes.node,
  live: PropTypes.bool,
  action: PropTypes.node
};
