import { Box, Typography, Breadcrumbs, Link, Stack } from '@mui/material';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { Link as RouterLink } from 'react-router-dom';

// ==============================|| PAGE HEADER (title + breadcrumb + actions) ||============================== //

export default function PageHeader({ title, breadcrumbs = [], action }) {
  return (
    <Stack
      direction={{ xs: 'column', sm: 'row' }}
      justifyContent="space-between"
      alignItems={{ xs: 'flex-start', sm: 'center' }}
      spacing={1.5}
      sx={{ mb: 3 }}
    >
      <Box>
        <Typography variant="h3" sx={{ fontWeight: 700, color: 'grey.800' }}>
          {title}
        </Typography>
        {breadcrumbs.length > 0 && (
          <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} sx={{ mt: 0.5 }}>
            <Link component={RouterLink} to="/dashboard" underline="hover" color="text.secondary" variant="caption">
              Home
            </Link>
            {breadcrumbs.map((b, i) =>
              b.to && i < breadcrumbs.length - 1 ? (
                <Link key={i} component={RouterLink} to={b.to} underline="hover" color="text.secondary" variant="caption">
                  {b.label}
                </Link>
              ) : (
                <Typography key={i} variant="caption" color="primary.main" sx={{ fontWeight: 600 }}>
                  {b.label}
                </Typography>
              )
            )}
          </Breadcrumbs>
        )}
      </Box>
      {action && <Box sx={{ width: { xs: '100%', sm: 'auto' }, flexShrink: 0 }}>{action}</Box>}
    </Stack>
  );
}
