import React from "react";
import { __ } from "@wordpress/i18n";
import NoteItem from "./NoteItem";

/**
 * Notes List Component
 *
 * Displays a list of subscription notes.
 *
 * @param {Object} props Component props
 * @param {Array} props.notes Array of note objects
 * @param {boolean} props.loading Loading state
 * @param {Function} props.onDelete Handler for deleting notes
 */
const NotesList = ({ notes, loading, onDelete }) => {
  if (loading) {
    return (
      <div className="arraysubs-notes-list arraysubs-notes-list--loading">
        <div className="arraysubs-notes-list__skeleton">
          {[1, 2, 3].map((i) => (
            <div key={i} className="arraysubs-notes-list__skeleton-item">
              <div className="skeleton-line skeleton-line--long" />
              <div className="skeleton-line skeleton-line--short" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (!notes || notes.length === 0) {
    return (
      <div className="arraysubs-notes-list arraysubs-notes-list--empty">
        <p>{__("No notes yet. Add a note below.", "arraysubs")}</p>
      </div>
    );
  }

  return (
    <div className="arraysubs-notes-list">
      {notes.map((note) => (
        <NoteItem key={note.id} note={note} onDelete={onDelete} />
      ))}
    </div>
  );
};

export default NotesList;