import { Box, styled, Typography } from '@mui/material'
import { ReactNode } from 'react'

interface PageHeaderProps {
  title: string | ReactNode
  subtitle?: string | ReactNode
  actions?: ReactNode
  noPadding?: boolean
}

const StyledBox = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'noPadding',
})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
  minHeight: '40px',
  padding: noPadding ? 0 : '0 25px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  margin: '1rem 0',
  flexWrap: 'wrap',
  '& .actions': {
    display: 'flex',
    gap: '1rem',
    alignItems: 'center',
    marginLeft: 'auto',
    '& .MuiButton-root': {
      height: '40px',
    },
  },
}))

export default function PageHeader({
  title,
  subtitle,
  actions,
  noPadding = false,
}: PageHeaderProps) {
  return (
    <StyledBox noPadding={noPadding}>
      <>
        {typeof title === 'string' ? (
          <Typography variant="h1">{title}</Typography>
        ) : (
          title
        )}
        {typeof subtitle === 'string' ? (
          <Typography>{subtitle}</Typography>
        ) : (
          <Box marginTop={'10px'}>{subtitle}</Box>
        )}
      </>
      <Box className="actions">{actions}</Box>
    </StyledBox>
  )
}
