import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickableText } from "../..";
import Note from "../Note";
import "./style.scss";
const NoteProspectiveCardList = ({ notes, onNotesViewAllClick, onAddNotesClick, dataCy, }) => {
    const options = {
        month: "short",
        day: "numeric",
        year: "numeric",
        hour: "numeric",
        minute: "numeric",
        hour12: true,
    };
    return (_jsxs("div", { className: "notes--container", children: [_jsxs("div", { className: "notes-header", children: [_jsx("div", { className: "notes-info", children: `Notes ${notes.length > 0 ? `(${notes.length})` : ""}` }), _jsx("span", { children: _jsx(ClickableText, { colorVariant: "orange", sizeVariant: "sm", text: "Add Note", onClick: onAddNotesClick, dataCy: `${dataCy}-${notes && notes.length > 0 ? "view-all" : "add"}` }) })] }), _jsx("div", { className: "notesContainer", children: notes.length > 0 ? (notes.slice(0, 1).map((note) => {
                    const correctDateTime = note.updatedAt || note.createdAt;
                    const tranformedDataTime = new Date(correctDateTime)
                        .toLocaleString("en-US", options)
                        .replace(",", "");
                    return (_jsx(Note, { id: note.id, author: note.userName, dateTime: tranformedDataTime, isEdited: note.updatedAt !== null, content: note.content, notesRemaining: notes.length - 1, onNotesViewAllClick: onNotesViewAllClick }));
                })) : (_jsx("div", { className: "no-notes", children: "No notes available." })) })] }));
};
export default NoteProspectiveCardList;
