import React from 'react';
import { Box, IconButton, Loader, Tooltip } from '@wix/design-system';
import { DownloadImportSmall } from '@wix/wix-ui-icons-common';
import { File } from './FileProps';
import { useDownloadFile } from './useDownloadFile';
import { useWixPatternsContainer } from '@wix/bex-core/react';

interface DownloadButtonProps {
  file: File;
}

export function DownloadButton({ file }: DownloadButtonProps) {
  const { downloadFile, isDownloading } = useDownloadFile({ file });

  const { translate: t } = useWixPatternsContainer();
  return (
    <Box
      paddingInlineEnd={4}
      marginLeft="auto"
      dataHook={`download-button-${file.mediaId}`}
    >
      {isDownloading ? (
        <Loader size="tiny" />
      ) : (
        <Tooltip content={t('cairo.customFields.fileUpload.download.cta')}>
          <IconButton
            priority="secondary"
            size="small"
            onClick={(e: React.MouseEvent<HTMLElement>) => {
              e.stopPropagation();
              downloadFile();
            }}
          >
            <DownloadImportSmall />
          </IconButton>
        </Tooltip>
      )}
    </Box>
  );
}