import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-tabs{display:flex;align-items:center;gap:2px;border-bottom:2px solid var(--border-default);overflow-x:auto;scrollbar-width:none;}
.nbl-tabs::-webkit-scrollbar{display:none;}
.nbl-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-muted);border:none;background:transparent;cursor:pointer;white-space:nowrap;position:relative;bottom:-2px;border-bottom:2px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast);border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
.nbl-tab:hover:not(.nbl-tab--active){color:var(--text-body);background:var(--surface-hover);}
.nbl-tab--active{color:var(--text-strong);font-weight:var(--weight-semibold);border-bottom-color:var(--color-primary);}
.nbl-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--steel-100);color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:0 4px;}
.nbl-tab--active .nbl-tab__count{background:var(--blue-100);color:var(--blue-700);}
`;

inject('nbl-tabs-css', css);

export interface TabItem {
  key: string;
  label: React.ReactNode;
  count?: number;
}

export interface TabsProps {
  items: TabItem[];
  value?: string;
  onChange?: (key: string) => void;
  className?: string;
}

export function Tabs({ items, value, onChange, className = '' }: TabsProps) {
  inject('nbl-tabs-css', css);
  const cls = ['nbl-tabs', className].filter(Boolean).join(' ');

  return (
    <div className={cls} role="tablist">
      {items.map((item) => {
        const active = item.key === value;
        return (
          <button
            key={item.key}
            role="tab"
            aria-selected={active}
            className={`nbl-tab${active ? ' nbl-tab--active' : ''}`}
            onClick={() => onChange?.(item.key)}
          >
            {item.label}
            {item.count !== undefined && (
              <span className="nbl-tab__count">{item.count}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}