import { useListContext } from "ra-core";
import { Fragment } from "react";
import { Separator } from "@/components/ds/ui/separator";

import { Note } from "./Note";
import { NoteCreate } from "./NoteCreate";

export const NotesIterator = ({
  reference,
  showStatus,
}: {
  reference: "contacts" | "deals" | "companies" | "tasks" | "invoices";
  showStatus?: boolean;
}) => {
  const { data, error, isPending } = useListContext();
  if (isPending || error) return null;
  return (
    <div className="mt-4">
      <NoteCreate reference={reference} showStatus={showStatus} />
      {data && (
        <div className="mt-4 space-y-4">
          {data.map((note, index) => (
            <Fragment key={index}>
              <Note
                note={note}
                isLast={index === data.length - 1}
                key={index}
                showStatus={showStatus}
              />
              {index < data.length - 1 && <Separator />}
            </Fragment>
          ))}
        </div>
      )}
    </div>
  );
};