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' : '',
        )}
        onClick={onDownload}
      >
        {children}
      </a>
    );
  },
);
