// widgets/bookmarks.jsx
//
// Config (in layout.yml):
//   - type: bookmarks
//     config:
//       items:
//         - { name: "Tailwind CSS Docs", url: "tailwindcss.com", mark: "T", color: "#06b6d4" }
//         - ...
//
// Edit layout.yml to add/remove bookmarks. No backend, no JS edit.

function BookmarksWidget({ config }) {
  const size = useWidgetSize();
  const items = config?.items ?? [];

  if (size === 'compact') {
    return (
      <Panel title="Bookmarks" action={<span className="muted" style={{fontSize: 11}}>{items.length} saved</span>}>
        <div className="bookmark-strip">
          {items.map((b, i) => (
            <a key={i} className="bookmark-chip"
               href={b.url.startsWith('http') ? b.url : `https://${b.url}`}
               target="_blank" rel="noopener noreferrer"
               title={b.name}>
              <div className="bookmark-favicon" style={{ background: b.color || 'var(--accent)' }}>
                {b.mark || (b.name && b.name[0].toUpperCase()) || '•'}
              </div>
            </a>
          ))}
          {items.length === 0 && <div className="muted" style={{padding: 12}}>No bookmarks.</div>}
        </div>
      </Panel>
    );
  }

  return (
    <Panel title="Bookmarks">
      <div>
        {items.map((b, i) => (
          <a key={i} className="bookmark"
             href={b.url.startsWith('http') ? b.url : `https://${b.url}`}
             target="_blank" rel="noopener noreferrer">
            <div className="bookmark-favicon" style={{ background: b.color || 'var(--accent)' }}>
              {b.mark || (b.name && b.name[0].toUpperCase()) || '•'}
            </div>
            <div className="bookmark-body">
              <div className="bookmark-name">{b.name}</div>
              <div className="bookmark-url">{b.url}</div>
            </div>
          </a>
        ))}
        {items.length === 0 && <div className="muted" style={{padding: 12}}>No bookmarks yet — add to layout.yml.</div>}
      </div>
    </Panel>
  );
}

registerWidget('bookmarks', BookmarksWidget);