import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/format';

export interface TabDef {
  id: string;
  label: ReactNode;
  count?: number | null;
  href: string;
}

/** Server-rendered, URL-driven tabs (no client state; deep-linkable; works without JS). */
export function Tabs({ tabs, active, className }: { tabs: TabDef[]; active: string; className?: string }) {
  return (
    <div className={cn('scrollbar-none -mx-4 overflow-x-auto border-b border-border px-4 sm:mx-0 sm:px-0', className)} role="tablist">
      <div className="flex min-w-max gap-0.5">
        {tabs.map((t) => {
          const isActive = t.id === active;
          return (
            <Link
              key={t.id}
              href={t.href}
              role="tab"
              aria-selected={isActive}
              scroll={false}
              className={cn('-mb-px inline-flex min-h-[44px] items-center gap-1.5 whitespace-nowrap border-b-2 px-3 text-[13px] font-medium md:min-h-[38px]', isActive ? 'border-fg text-fg' : 'border-transparent text-muted hover:border-border-strong hover:text-fg')}
            >
              {t.label}
              {t.count !== undefined && t.count !== null ? <span className={cn('num rounded-sm px-1 text-[10px]', isActive ? 'bg-accent text-accent-fg' : 'bg-inset text-muted')}>{t.count.toLocaleString('en-US')}</span> : null}
            </Link>
          );
        })}
      </div>
    </div>
  );
}

/** Pill group for period selectors etc. */
export function Segmented({ options, active, className }: { options: Array<{ id: string; label: string; href: string }>; active: string; className?: string }) {
  return (
    <div className={cn('inline-flex rounded-md border border-border bg-sunken p-0.5 text-[11px] font-medium', className)}>
      {options.map((o) => (
        <Link key={o.id} href={o.href} scroll={false} className={cn('inline-flex min-h-[28px] items-center rounded-[4px] px-2.5', o.id === active ? 'bg-elevated text-fg shadow-card' : 'text-muted hover:text-fg')} aria-current={o.id === active ? 'true' : undefined}>
          {o.label}
        </Link>
      ))}
    </div>
  );
}