Upload

'use client'

import React from 'react'
import { Upload } from 'biibaos'

export default function BasicUpload() {
  return (
    <Upload 
      multiple 
      label="Upload assets" 
      description="Drag and drop or click to browse" 
    />
  )
}

'use client'

import React, { useState } from 'react'
import { Upload, Stack, Badge } from 'biibaos'

export default function AssetManager() {
  const [loading, setLoading] = useState(false)
  const [progress, setProgress] = useState(0)
  const [fileCount, setFileCount] = useState(0)

  const simulateUpload = (files: File[]) => {
    setFileCount(files.length)
    setLoading(true)
    setProgress(0)

    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval)
          setTimeout(() => setLoading(false), 500)
          return 100
        }
        return prev + 2
      })
    }, 50)
  }

  return (
    <Stack direction="column" gap={20} style={{ width: '100%' }}>
      <Upload
        multiple
        accept="image/*,.pdf"
        maxSize={5 * 1024 * 1024} // 5MB
        isLoading={loading}
        loadingProgress={progress}
        onUpload={simulateUpload}
        label={loading ? `Uploading ${fileCount} file(s)...` : 'Cloud Asset Manager'}
        description="Supports JPG, PNG, and PDF (Max 5MB)"
      />

      {loading && (
        <Badge variant="primary" pulse pill>
          Syncing to Cloud: {progress}%
        </Badge>
      )}
    </Stack>
  )
}