import { useTranslation } from 'react-i18next';

import { Stack, Typography, useTheme } from '@mui/material';
import { IconArrowLeft, IconDownload } from '@tabler/icons-react';

import ToolButton from '../ToolButton';

import { type HeaderProps } from './types';

const Header = ({
  name,
  hideName = false,
  onClose,
  hideClose = false,
  onDownload,
  hideDownload = false,
}: HeaderProps) => {
  const { palette } = useTheme();
  const { t } = useTranslation();

  const showActions = !hideDownload;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        width: '100%',
        height: '50px',
        position: 'fixed',
        top: 0,
        left: 0,
        background:
          'linear-gradient(to bottom,rgba(0,0,0,.65) 0%,transparent 100%)',
        justifyContent: 'space-between',
        zIndex: 1,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 3,
        }}
      >
        {!hideClose && (
          <ToolButton
            label={t('general:close')}
            Icon={IconArrowLeft}
            onClick={onClose}
          />
        )}
        {!hideName && (
          <Typography
            sx={{
              color: palette.new.text.neutral.inverted,
            }}
          >
            {name}
          </Typography>
        )}
      </Stack>
      {showActions && (
        <Stack sx={{ flexDirection: 'row' }}>
          {!hideDownload && (
            <ToolButton
              label={t('general:download')}
              Icon={IconDownload}
              onClick={onDownload}
            />
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default Header;
