import styled from '@emotion/styled'
import { Box, Divider, Typography } from '@mui/material'
import { ReactNode } from 'react'
interface PageHeaderProps {
  urlTenantKey: string | ReactNode
  title?: string | ReactNode
  actions?: ReactNode
}
export const StyledHeaderBox = styled(Box)(({ theme }) => ({
  width: '100%',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
}))
export default function ReportPageHeader({
  urlTenantKey,
  title,
  actions,
}: PageHeaderProps) {
  return (
    <StyledHeaderBox>
      <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
        {urlTenantKey}
      </Typography>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Divider orientation="horizontal" sx={{ width: '100px' }} />
        <Typography variant="h6" sx={{ fontSize: '24px' }}>
          {title}
        </Typography>
        <Divider orientation="horizontal" sx={{ width: '100px' }} />
      </Box>
      <Box className="actions">{actions}</Box>
    </StyledHeaderBox>
  )
}