import { useTranslation } from 'react-i18next';
import { UploadCellWrap } from './UploadCellWrap';
import uploadSvg from '@/assets/icon/upload2.svg';
import loadingSvg from '@/assets/icon/loading_black.svg';

export interface UploadCellProps {
  label?: string;
  loading?: boolean;
  width: number | string;
  height: number | string;
  showTip?: boolean;
  onClick?: () => void;
}
const UploadCell: React.FC<UploadCellProps> = ({
  label,
  loading,
  width,
  height,
  showTip = true,
  onClick,
}) => {
  const { t } = useTranslation();
  return (
    <UploadCellWrap width={width} height={height}>
      {label && <div className="label">{t(label)}</div>}
      <div className="uploadCellContainer">
        <div
          onClick={() => {
            onClick?.();
          }}
        >
          {loading ? <img src={loadingSvg} /> : <img src={uploadSvg} />}
        </div>
        {showTip && <div className="tip">{t('upload your file')}</div>}
      </div>
    </UploadCellWrap>
  );
};
export default UploadCell;
