import { Card, Divider, Space } from "antd";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import JobNotesPinToggle from "../job-notes-pin-toggle/job-notes-pin-toggle.component";

function PinnedJobNotes({ job }) {
  const { t } = useTranslation();

  const pinnedNotes = useMemo(() => {
    return job?.notes?.filter((note) => note.pinned); //This will be typically filtered, but adding this to maximize flexibility of the component.
  }, [job.notes]);

  return pinnedNotes?.length ? (
    <>
      <Divider />
      <Space orientation="vertical" style={{ width: "100%" }}>
        {pinnedNotes?.map((note) => (
          <Card
            key={note.id}
            title={`${t("notes.labels.pinned_note")} - ${t(`notes.fields.types.${note.type}`)}`}
            extra={<JobNotesPinToggle note={note} />}
          >
            {note.text}
          </Card>
        ))}
      </Space>
    </>
  ) : null;
}
export default PinnedJobNotes;
