S3 File Viewer

'use client'

import * as React from 'react'

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

const RECEIPT_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="15" fill="#0d5a4e" text-anchor="middle">receipt.png</text>
     </svg>`,
  )

// Stands in for your API client. In a real app these are the same functions
// your server actions already expose.
const demoAdapter: StorageAdapter = {
  signFile: async () => ({ data: { url: '/api/demo-upload', key: 'demo' } }),
  getFile: async (key) => ({ data: { url: key.endsWith('.png') ? RECEIPT_SVG : null } }),
  deleteFile: async () => ({ data: { ok: true } }),
}

export default function S3FileViewerDemo() {
  return (
    <StorageProvider adapter={demoAdapter}>
      <div className="flex w-full flex-wrap items-start gap-8">
        <div className="space-y-2">
          <p className="text-sm font-medium text-muted-foreground">Image key</p>
          <S3FileViewer url="/payouts/1723459200_receipt.png" className="h-32 w-56 rounded-md border" />
        </div>
        <div className="space-y-2">
          <p className="text-sm font-medium text-muted-foreground">Document key</p>
          <S3FileViewer url="/payouts/1723459200_settlement-report.pdf" />
        </div>
      </div>
    </StorageProvider>
  )
}