import { type FC } from 'react';

import { IconDownload, IconX } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack/Stack';
import Typography from '@material-hu/mui/Typography/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  title: string;
  onDownload: () => void;
  onClose: () => void;
};

const Header: FC<Props> = ({ title, onDownload, onClose }) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <Stack
      sx={{
        width: 1,
        px: 2,
        py: 1.5,
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: ({ zIndex }) => zIndex.modal + 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        pointerEvents: 'auto',
      }}
    >
      <Typography
        title={title}
        variant="globalL"
        fontWeight="fontWeightSemiBold"
        noWrap
        sx={{
          maxWidth: '65%',
          color: ({ palette }) => palette.new.text.neutral.inverted,
        }}
      >
        {title}
      </Typography>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          color: ({ palette }) => palette.new.text.neutral.inverted,
        }}
      >
        {onDownload && (
          <Button
            variant="secondary"
            startIcon={<IconDownload />}
            onClick={onDownload}
          >
            {t('download')}
          </Button>
        )}
        <Stack
          onClick={onClose}
          sx={{
            width: 36,
            aspectRatio: 1,
            cursor: 'pointer',
            borderRadius: ({ shape }) => shape.borderRadiusM,
            backgroundColor: 'transparent',
            alignItems: 'center',
            justifyContent: 'center',
            '&:hover': {
              backgroundColor: 'rgba(255,255,255,0.1)',
            },
          }}
        >
          <IconX />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default Header;
