"use client"; import React, { useEffect, useState, useRef } from "react"; interface ProjectPageViewControlsProps { slugs: string[]; trackId: string; } export default function ProjectPageViewControls({ slugs, trackId, }: ProjectPageViewControlsProps) { const [activeIndex, setActiveIndex] = useState(0); const [canScrollLeft, setCanScrollLeft] = useState(false); const [canScrollRight, setCanScrollRight] = useState(true); useEffect(() => { const track = document.getElementById(trackId); if (!track) return; const checkScroll = () => { const { scrollLeft, scrollWidth, clientWidth } = track; setCanScrollLeft(scrollLeft > 5); setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 5); }; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const id = entry.target.id; const index = slugs.findIndex((s) => `project-${s}` === id); if (index !== -1) { setActiveIndex(index); } } }); }, { root: track, threshold: 0.6 } ); slugs.forEach((slug) => { const el = document.getElementById(`project-${slug}`); if (el) observer.observe(el); }); track.addEventListener("scroll", checkScroll, { passive: true }); checkScroll(); return () => { observer.disconnect(); track.removeEventListener("scroll", checkScroll); }; }, [slugs, trackId]); const scroll = (direction: "left" | "right") => { const track = document.getElementById(trackId); if (!track) return; const cardWidth = track.firstElementChild?.clientWidth || 300; const delta = direction === "left" ? -(cardWidth + 24) : cardWidth + 24; const prefersReducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; track.scrollBy({ left: delta, behavior: prefersReducedMotion ? "auto" : "smooth", }); }; return (

{/* Indicator dots using semantic anchor links */}

{slugs.map((slug, idx) => ( ))}

); }