'use client'

// React Imports
import type { FC } from 'react'

// MUI Imports
import { Box, Typography, Divider } from '@mui/material'
import { useTheme } from '@mui/material/styles'

// Type Imports
import type { Outlet } from '@/types/services/outlet'

// Props Interface
export interface ReportHeaderProps {
  outlet?: Outlet
  reportTitle: string
  reportSubtitle?: string
  brandName?: string
  brandColor?: string
  className?: string
  periode?: string
}

const ReportHeader: FC<ReportHeaderProps> = ({
  outlet,
  reportTitle,
  reportSubtitle = 'Laporan Operasional',
  brandName = 'Apskel',
  brandColor,
  className,
  periode
}) => {
  // Hooks
  const theme = useTheme()

  return (
    <Box className={className}>
      <Box sx={{ p: theme.spacing(8, 8, 6) }}>
        <Box sx={{ textAlign: 'center' }}>
          <Typography
            variant='h4'
            component='h3'
            sx={{
              fontWeight: 700,
              color: '#222222'
            }}
          >
            {reportTitle}
          </Typography>
          {periode && (
            <Typography
              variant='body2'
              sx={{
                color: '#222222',
                mt: 2
              }}
            >
              {periode}
            </Typography>
          )}
        </Box>
      </Box>
      <Divider
        sx={{
          borderWidth: 2,
          borderColor: brandColor || theme.palette.primary.main
        }}
      />
    </Box>
  )
}

export default ReportHeader
