"use client";

import { FileUpload } from "@/components/ui/file-upload";
import { Label } from "@/components/ui/label";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import { UploadType, type UploadedFileRef } from "@/types/upload";
import { DocumentType } from "@/types/provider";
import type { DocumentUploads } from "./types";

/** The four backend-supported KYC document types, in display order. */
const DOC_TYPES: DocumentType[] = [
  DocumentType.BUSINESS_REGISTRATION,
  DocumentType.TRADE_LICENSE,
  DocumentType.NATIONAL_ID,
  DocumentType.TAX_CERTIFICATE,
];

interface DocumentsSectionProps {
  documents: DocumentUploads;
  setDocument: (type: DocumentType, file: UploadedFileRef | null) => void;
}

export function DocumentsSection({
  documents,
  setDocument,
}: DocumentsSectionProps) {
  const { t } = useTranslation();

  return (
    <div className="flex flex-col gap-5">
      <Typography
        as="p"
        variant="caption"
        color="secondary"
        className="rounded-[12px] bg-background p-3"
      >
        {t("auth.registerProvider.documents.optionalHint")}
      </Typography>

      {DOC_TYPES.map((type) => (
        <div key={type} className="flex flex-col gap-1.5">
          <Label>{t(`auth.registerProvider.documents.types.${type}`)}</Label>
          <FileUpload
            uploadType={UploadType.PROVIDER_DOCUMENT}
            variant="document"
            accept="application/pdf,image/jpeg,image/png"
            value={documents[type] ?? null}
            onChange={(file) => setDocument(type, file)}
            hint={t("auth.registerProvider.documents.docHint")}
          />
        </div>
      ))}
    </div>
  );
}