import SpinnerSVG from '@/components/svg/SpinnerSVG';

export const UploadLoadingTile = ({
  uploadProgress,
}: {
  uploadProgress?: number;
}) => {
  return (
    <div className='flex h-full w-full items-center justify-center gap-3'>
      <div className='relative rounded-xl border border-border-primary bg-background-secondary p-8'>
        <div className='flex flex-col items-center gap-4'>
          <div className='rounded-full bg-accent-brand/10 p-3'>
            <SpinnerSVG className='h-8 w-8 animate-spin text-accent-brand' />
          </div>

          <div className='flex flex-col items-center gap-2'>
            <div className='text-lg font-medium text-foreground-primary'>
              Uploading your video...
            </div>
            {uploadProgress ? (
              <div className='text-sm text-foreground-secondary'>
                {uploadProgress}%
              </div>
            ) : (
              <div className='text-sm text-foreground-secondary'>
                This may take a moment
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default UploadLoadingTile;