/**
 * Expandable content browser — shows all 10 educational items.
 */

import React, { useState } from "react";
import styles from "./ContentBrowser.module.css";

const FORMAT_ICONS = { video: "\uD83C\uDFAC", slides: "\uD83D\uDCCA", lecture: "\uD83C\uDFA4" };
const DIFF_COLORS = { Beginner: "#34d399", Intermediate: "#fbbf24", Advanced: "#f87171" };

export default function ContentBrowser({ items }) {
  const [open, setOpen] = useState(false);

  if (!items.length) return null;

  return (
    <section className={styles.section}>
      <button className={styles.toggle} onClick={() => setOpen((o) => !o)}>
        <span>{open ? "\u25BC" : "\u25B6"}</span>
        <span>Browse all available content ({items.length})</span>
      </button>

      {open && (
        <div className={styles.list}>
          {items.map((item) => (
            <article key={item.id} className={styles.item}>
              <h4 className={styles.itemTitle}>
                {item.id}. {item.title}
              </h4>
              <div className={styles.pills}>
                <span className={styles.pill}>
                  {FORMAT_ICONS[item.format] || "\uD83D\uDCC4"} {item.format}
                </span>
                <span
                  className={styles.pill}
                  style={{ borderLeft: `3px solid ${DIFF_COLORS[item.difficulty] || "#888"}` }}
                >
                  {item.difficulty}
                </span>
                <span className={styles.pill}>{item.duration_minutes} min</span>
              </div>
              <p className={styles.desc}>{item.description}</p>
              <div className={styles.tags}>
                {item.tags.map((t) => (
                  <span key={t} className={styles.tag}>
                    {t}
                  </span>
                ))}
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}