import { PropsWithChildren, MouseEvent, forwardRef } from 'react';
import { clsx } from 'clsx';

type UploadItemLinkProps = PropsWithChildren<{
  url?: string;
  onDownload?: (event: MouseEvent) => void;
  singleFileUpload: boolean;
}>;

export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
  ({ children, url, onDownload, singleFileUpload }, ref) => {
    if (!url) {
      return (
        <div
          ref={ref as React.RefObject<HTMLDivElement>}
          className={clsx('np-upload-input__item-container')}
        >
          {children}
        </div>
      );
    }

    return (
      <a
        ref={ref as React.RefObject<HTMLAnchorElement>}
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        className={clsx(
          'np-upload-input__item-link',
          singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
        )}
        tabIndex={0}
        onClick={onDownload}
      >
        {children}
      </a>
    );
  },
);