S3 File Uploader

'use client'

import * as React from 'react'

import { S3FileUploader } from '@/components/custom/s3-file-uploader'
import { StorageProvider, type StorageAdapter } from '@/lib/kiota-storage'

const STORED_SVG =
  'data:image/svg+xml;utf8,' +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="140">
       <rect width="240" height="140" fill="#d7ece8"/>
       <text x="120" y="76" font-family="sans-serif" font-size="14" fill="#0d5a4e" text-anchor="middle">stored file</text>
     </svg>`,
  )

// A demo back end: /api/demo-upload accepts the bytes and throws them away,
// and getFile serves a placeholder rather than what you actually picked.
// Swap all three for your own API client.
const demoAdapter: StorageAdapter = {
  proxyUploadEndpoint: '/api/demo-upload',
  signFile: async ({ fileName, filePath }) => ({
    data: { url: '/api/demo-upload', key: `${filePath}/1723459200_${fileName}` },
  }),
  getFile: async () => ({ data: { url: STORED_SVG } }),
  deleteFile: async () => ({ data: { ok: true } }),
}

export default function S3FileUploaderDemo() {
  const [key, setKey] = React.useState<string | null>(null)

  return (
    <StorageProvider adapter={demoAdapter}>
      <div className="w-full max-w-sm space-y-3">
        <S3FileUploader
          fieldId="demo-uploader"
          valueKey={key}
          filePath="/payout-receipts"
          onCompleteAction={setKey}
          placeholder="Upload receipt"
          maxSize={5}
          acceptedFileTypes={['.png', '.jpg', '.jpeg', '.pdf']}
          // The demo route is a normal POST endpoint, not a presigned bucket.
          uploadMode="proxy"
        />
        <p className="text-sm text-muted-foreground">
          Stored key: <code className="font-mono">{key ?? 'null'}</code>
        </p>
      </div>
    </StorageProvider>
  )
}