'use client';

import Link from 'next/link';
import {usePathname, useSearchParams} from 'next/navigation';
import type {DemoContent} from '@/types/content';

type DemoSubnavProps = {
  demos: DemoContent[];
  activeSlug?: DemoContent['slug'];
  hrefType?: 'page' | 'browser';
};

export function DemoSubnav({demos, activeSlug, hrefType = 'page'}: DemoSubnavProps) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const selectedSlug = activeSlug ?? searchParams.get('demo') ?? demos[0]?.slug;

  return (
    <nav className="demoSubnav" aria-label="Dema konfiguratorów">
      {demos.map(demo => {
        const isActive = selectedSlug === demo.slug || pathname === `/pl/${demo.slug}`;
        const href = hrefType === 'browser' ? `/pl/dema?demo=${demo.slug}` : `/pl/${demo.slug}`;

        return (
          <Link className={isActive ? 'isActive' : undefined} href={href} key={demo.slug}>
            <span>{demo.eyebrow}</span>
            {demo.title}
          </Link>
        );
      })}
    </nav>
  );
}