import React, { ReactNode } from 'react';
import downloadIcon from "../../../../assets/images/download-arrow.svg";
import ListColumn from "./ListColumn";

type DownloadColumnProps<T> = {
    children?: ReactNode;
    title?: string;
    flex?: string;
    label?: string;
    path?: string;
    file?: T | null;
    onDownload?: (file: T) => void;
};

const DownloadColumn = <T,>({ title, children, label, flex = '0 0 100px', path, file, onDownload }: DownloadColumnProps<T>) => {
    const canHandle = !!(file && onDownload);
    const disabled = !path && !canHandle;

    return (
        <ListColumn label={label} flex={flex}>
            {label && <span className={'label'}>{label}:</span>}
            <div title={`${disabled ? 'Δεν Υπάρχει Αρχείο' : ''}`} className={`download-column column-border ${disabled ? 'disabled' : ''}`}>
                <img src={downloadIcon} alt="download" />
                {canHandle ? (
                    <button
                        type="button"
                        className={'download-button'}
                        onClick={() => file && onDownload?.(file)}
                    >
                        {children ?? '--'}
                    </button>
                ) : (
                    <a className={'download-button'} role={"button"} href={path} download>
                        {children ?? '--'}
                    </a>
                )}
            </div>
        </ListColumn>
    );
};

export default DownloadColumn;