import { forgetMemory } from "../app/commands.ts";
import { store } from "../app/store.ts";
import { Icon } from "./shared.tsx";
export function Shelf() {
  const s = store.state;
  return (
    <>
      <h2>Gifts</h2>
      <ul id="shelf-items" class="shelf-items">
        {s.shelf.length ? (
          s.shelf.map((gift, i) => (
            <li key={i}>
              <Icon name={gift} scale={4} alt={gift} />
              <span>{gift}</span>
            </li>
          ))
        ) : (
          <li class="muted">No gifts yet. Pets give gifts when they feel like it.</li>
        )}
      </ul>
      <h2>Memories</h2>
      <p class="muted small">
        Things your pet chose to remember about you. It can look them up while talking.
      </p>
      <ul id="memory-list" class="memory-list">
        {s.memories.length ? (
          [...s.memories].reverse().map((memory, i) => (
            <li key={memory}>
              <span>{memory}</span>
              <button
                type="button"
                class="text-button"
                aria-label={`forget: ${memory}`}
                onClick={() => forgetMemory(s.memories.length - 1 - i)}
              >
                forget
              </button>
            </li>
          ))
        ) : (
          <li class="muted">Nothing yet. Tell {s.pet?.name || "your pet"} about yourself.</li>
        )}
      </ul>
    </>
  );
}