import { SectionHeading } from "@/components/ui/section-heading"
import { FileUploadBlock } from "@/components/blocks/file-upload-block"
import { ComponentContainer } from "@/components/ui/component-container"

export function FileUploadSection() {
  return (
    <section id="file-upload" className="space-y-6">
      <SectionHeading
        title="File Upload"
        description="A component for uploading and managing files with progress tracking."
      />

      <ComponentContainer>
        <FileUploadBlock />
      </ComponentContainer>

      <div className="space-y-4">
        <h3 className="text-lg font-medium">Usage Guidelines</h3>
        <div className="bg-muted/30 p-4 rounded-lg space-y-2">
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <strong>Clear Instructions:</strong> Provide clear guidance on supported file types, size limits, and how
              to upload.
            </li>
            <li>
              <strong>Drag & Drop:</strong> Support both drag-and-drop and traditional file selection to accommodate
              different user preferences.
            </li>
            <li>
              <strong>Progress Indication:</strong> Show upload progress to provide feedback, especially for larger
              files.
            </li>
            <li>
              <strong>Error Handling:</strong> Display clear error messages when uploads fail, with guidance on how to
              resolve issues.
            </li>
            <li>
              <strong>File Preview:</strong> When possible, provide previews of uploaded files (especially for images).
            </li>
            <li>
              <strong>File Management:</strong> Allow users to remove files before and after upload, and provide options
              to organize multiple files.
            </li>
            <li>
              <strong>Accessibility:</strong> Ensure the upload functionality is accessible via keyboard and screen
              readers.
            </li>
            <li>
              <strong>Fallbacks:</strong> Provide alternative upload methods for browsers that don't support modern
              features like drag-and-drop.
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}