Notch Navigation

"use client";
import { useState } from "react";

export function NotchNav({ tabs }: { tabs: string[] }) {
  const [active, setActive] = useState(0);
  const w = 60; const gap = 4;
  return (
    <div className="relative inline-flex rounded-full border border-border bg-surface/90 px-1 py-1 shadow-lg backdrop-blur-md">
      <div className="absolute top-1 h-[calc(100%-8px)] rounded-full bg-brand transition-all duration-300"
        style={{ left: `${gap + active * (w + (100/tabs.length - w/tabs.length)/2)}px`, width: `${w}px` }} />
      {tabs.map((t, i) => (
        <button key={t} onClick={() => setActive(i)} className={`relative z-10 px-4 py-1.5 text-sm font-medium ${active === i ? "text-brand-foreground" : "text-muted-foreground"}`}>
          {t}
        </button>
      ))}
    </div>
  );
}