/**
 * QuickLinksBar - A thin horizontal bar at the top of the screen
 * displaying configurable quick-link buttons that open in new tabs.
 */
function QuickLinksBar() {
  const raw = import.meta.env.REACT_APP_QUICK_LINKS || '';
  const links = raw.split(',').map(s => s.trim()).filter(Boolean);

  if (links.length === 0) return null;

  /**
   * Parse a URL into a short, readable label.
   * - For paths like "https://github.com/Drewpeifer" → "github/Drewpeifer"
   * - For bare domains like "https://radio.garden/" → "radio.garden"
   * - Strips www. prefix for brevity
   */
  function parseLabel(url) {
    try {
      const parsed = new URL(url);
      let host = parsed.hostname.replace(/^www\./, '');
      const path = parsed.pathname.replace(/\/+$/, ''); // trim trailing slashes

      if (path && path !== '') {
        // Has a meaningful path — include host (without TLD) + path
        const hostBase = host.replace(/\.[^.]+$/, ''); // strip last TLD segment
        return `${hostBase}${path}`;
      }
      // No path — just return the host
      return host;
    } catch {
      return url;
    }
  }

  return (
    <div className="quick-links-bar">
      {links.map((url) => (
        <a
          key={url}
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          className="quick-link-btn"
          title={url}
        >
          {parseLabel(url)}
        </a>
      ))}
    </div>
  );
}

export default QuickLinksBar;
