Tabs

"use client";
import { useState } from "react";
import { cn } from "@/lib/utils";

export function Tabs({ items, defaultValue, onChange }:
  { items: string[]; defaultValue?: string; onChange?: (v: string) => void }) {
  const [value, setValue] = useState(defaultValue ?? items[0]);
  return (
    <div role="tablist" className="inline-flex gap-0.5 rounded-lg bg-surface-2 p-[3px]">
      {items.map((item) => (
        <button
          key={item}
          role="tab"
          aria-selected={value === item}
          onClick={() => { setValue(item); onChange?.(item); }}
          className={cn(
            "h-[30px] rounded px-3 text-[13px] font-medium text-fg-muted transition",
            "aria-selected:bg-bg aria-selected:text-fg aria-selected:shadow-sm",
          )}
        >
          {item}
        </button>
      ))}
    </div>
  );
}