import { Close } from '@mui/icons-material'
import { Box, Typography, IconButton } from '@mui/material'
import { styles } from './styles'
import type { BasemapsUILabels } from './types'
import { Tooltip } from '../tooltip/tooltip'

export function Header({
  isMobile = false,
  labels,
  onChangeCollapsed,
}: {
  labels: BasemapsUILabels['header']
  isMobile?: boolean
  onChangeCollapsed: () => void
}) {
  return (
    <Box sx={styles.header}>
      {isMobile && (
        <>
          <Typography variant='caption' flexGrow={1}>
            {labels.title}
          </Typography>
          <Tooltip title={labels.actions.close}>
            <IconButton
              size='small'
              onClick={onChangeCollapsed}
              aria-label={labels.actions.close}
            >
              <Close />
            </IconButton>
          </Tooltip>
        </>
      )}
    </Box>
  )
}