import {
  Loader2,
  UploadIcon,
} from 'lucide-react';

import { Lang } from '@/lang/Lang';

type FileDataImageEmptyUploadProps = {
  uploading: boolean;
  buttonTitle: string;
  isMobile: boolean;
  col: number;
  onUpload: () => void;
};

export const FileDataImageEmptyUpload = ({
  uploading,
  buttonTitle,
  isMobile,
  col,
  onUpload,
}: FileDataImageEmptyUploadProps) => (

  <div
    onClick={onUpload}
    className='flex items-center justify-center cursor-pointer bg-gray-200 border border-gray-300 border-dotted hover:bg-gray-100 transition-all duration-300'
    style={{
      width: '100%',
      height: 100,
      borderRadius: 8,
      overflow: 'hidden',


    }}
  >


    <div className='text-xs flex items-center gap-2 justify-center'>
      {uploading ? (
        <>
          <Loader2 className='size-4 animate-spin' />
          {Lang.key('uploading_file_wait')}
        </>
      ) : (
        <>
          <UploadIcon className='size-4' />

        </>
      )}
    </div>
  </div>
);
