"use client";

import { useSelectedLayoutSegment } from "next/navigation";
import Link from "next/link";
import "./SegmentTabs.css";

interface SegmentTabsProps {
  segments: Array<{
    segment: string | null;
    title: string;
    children?: React.ReactNode;
    href?: string;
  }>;
  basePath?: string;
}

export function SegmentTabs({ segments, basePath = "/" }: SegmentTabsProps) {
  const selected = useSelectedLayoutSegment();
  return (
    <nav className="SegmentTabs">
      {segments.map((segment) => (
        <Link
          key={segment.segment}
          href={segment.href ?? basePath + (segment.segment ?? "")}
          className={`SegmentTabs-tab ${selected === segment.segment ? "SegmentTabs-tab--active" : ""}`}
        >
          {segment.title}
          {segment.children}
        </Link>
      ))}
    </nav>
  );
}
