import React from 'react';
import { DownloadWrap } from './DownloadWrap';
import { MediaProps } from '.';
import { revokeJsonProxy } from '@/utils/constants';
import { getPlatformType } from '@/utils/getPlatform';
import Button from '@/components/Button';

const Download: React.FC<MediaProps & { cardWidth?: number }> = ({
  media,
  mediaVisible,
  mediaMimeType,
  cardWidth,
}) => {
  const url =
    getPlatformType(media) === 'IPFS' ? revokeJsonProxy(media) : media;

  return (
    <DownloadWrap mediaVisible={mediaVisible} cardWidth={cardWidth}>
      <div className="hideScrollbar">
        <div className="spanContainer">
          <span>{mediaMimeType?.split('/')[1]?.split(';')[0]}</span>
        </div>
        <a
          target="_blank"
          rel="noreferrer noopener"
          download
          href={url}
          className="downloadA"
        >
          <Button label="Download File" />
        </a>
      </div>
    </DownloadWrap>
  );
};

export default Download;
