import React from "react";
import {
  Article,
  Books,
  BookOpenText,
  CalendarBlank,
  Plus,
} from "@phosphor-icons/react";
import { Empty } from "./ui.jsx";

export function LibraryOverview({ kind, materials, onAdd, onOpenMaterial }) {
  return (
    <div className="library-overview">
      <div className="overview-heading">
        <div>
          <span className="eyebrow">Your library</span>
          <h1>{kind === "article" ? "Articles" : "Books"}</h1>
        </div>
        <button className="primary" onClick={onAdd}>
          <Plus size={19} />
          {kind === "article" ? "Add article" : "Add book"}
        </button>
      </div>
      {materials.length ? (
        <div className="overview-list">
          {materials.map((material) => (
            <button key={material.id} onClick={() => onOpenMaterial(material)}>
              <span className="material-icon" aria-hidden="true">
                {material.kind === "book" ? (
                  <BookOpenText size={20} />
                ) : (
                  <Article size={20} />
                )}
              </span>
              <span className="material-details">
                <strong>{material.title}</strong>
                <span>
                  {material.subject ||
                    (material.kind === "book"
                      ? `${material.page_count} pages`
                      : "Markdown lesson")}
                </span>
              </span>
              <span className="material-card-date">
                <CalendarBlank size={13} aria-hidden="true" />
                {new Intl.DateTimeFormat("en", {
                  month: "short",
                  day: "numeric",
                }).format(new Date(material.updated_at))}
              </span>
            </button>
          ))}
        </div>
      ) : (
        <Empty
          icon={kind === "book" ? Books : Article}
          title={
            kind === "book"
              ? "Bring your books here"
              : "Your next lesson starts here"
          }
        >
          {kind === "book"
            ? "Read a PDF, highlight a passage and ask questions with page-aware context."
            : "Import a lesson written by your agent, with diagrams, math and sources."}
        </Empty>
      )}
    </div>
  );
}