import React from 'react';
import { Box, Stack, styled } from '@mui/material';
import PropTypes from 'prop-types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StyledHeader = styled(Box)(({
  theme
}) => ({
  backgroundColor: theme.palette.background.default,
  '& .header-row': {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: theme.spacing(1)
  },
  '& .right': {
    display: 'flex',
    alignItems: 'center',
    gap: theme.spacing(1.5)
  },
  '& .tabs': {
    marginTop: theme.spacing(2),
    '& .MuiButton-root': {
      border: 'none',
      color: '#999',
      '&.active': {
        color: '#222'
      }
    }
  },
  '@media (max-width: 900px)': {
    '& .header-row': {
      flexDirection: 'column',
      alignItems: 'flex-start'
    },
    '& .right': {
      flexDirection: 'column',
      width: '100%',
      '.search-always-open, .toolbar-btn-show, a, button, .MuiButtonGroup-root': {
        width: '100% !important'
      }
    }
  }
}));
function LayoutHeader({
  left = null,
  tabs = null,
  actions = null,
  ...props
}) {
  if (!left && !tabs) {
    return /*#__PURE__*/_jsx(StyledHeader, {
      elevation: 0,
      ...props,
      children: /*#__PURE__*/_jsxs(Box, {
        className: "header-row",
        children: [/*#__PURE__*/_jsx(Box, {
          className: "left"
        }), /*#__PURE__*/_jsx(Stack, {
          direction: "row",
          className: "right",
          children: actions
        })]
      })
    });
  }
  if (left && !tabs || !left && tabs) {
    return /*#__PURE__*/_jsx(StyledHeader, {
      elevation: 0,
      ...props,
      children: /*#__PURE__*/_jsxs(Box, {
        className: "header-row",
        children: [/*#__PURE__*/_jsx(Box, {
          className: "left",
          children: left || tabs
        }), /*#__PURE__*/_jsx(Stack, {
          direction: "row",
          className: "right",
          children: actions
        })]
      })
    });
  }
  return /*#__PURE__*/_jsxs(StyledHeader, {
    elevation: 0,
    ...props,
    children: [/*#__PURE__*/_jsxs(Box, {
      className: "header-row",
      children: [/*#__PURE__*/_jsx(Box, {
        className: "left",
        children: left
      }), /*#__PURE__*/_jsx(Stack, {
        direction: "row",
        className: "right",
        children: actions
      })]
    }), tabs && /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 2
      },
      children: tabs
    })]
  });
}
LayoutHeader.propTypes = {
  left: PropTypes.node,
  tabs: PropTypes.node,
  actions: PropTypes.node
};
export default LayoutHeader;