import { fileRepository } from '@/entities/file'
import { DeleteFileButton } from '@/features/delete-file'
import { UploadFileForm } from '@/features/upload-file'
import { db } from '@/shared/api'

/** The attachments on one note, with the controls to add and remove them. */
export async function Attachments({ noteId }: { noteId: string }) {
  const attached = await fileRepository(db()).listByNote(noteId)
  return (
    <section>
      <h3>Attachments</h3>
      {attached.length === 0 ? <p>No attachments yet.</p> : null}
      <ul>
        {attached.map((file) => (
          <li key={file.id}>
            <a href={file.url}>{file.name}</a> ({file.size} bytes)
            <DeleteFileButton id={file.id} />
          </li>
        ))}
      </ul>
      <UploadFileForm noteId={noteId} />
    </section>
  )
}