'use client';

import { NavGroup } from '@/ui/NavGroup';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import React from 'react';

interface NotFoundHelpLinksProps {
  links: Array<{ label: string; href: string }>;
}

/**
 * NotFoundHelpLinks
 * 
 * Semantic component for secondary navigation on the 404 page.
 * Styled as technical metadata links.
 */
export function NotFoundHelpLinks({ links }: NotFoundHelpLinksProps) {
  return (
    <NavGroup direction="horizontal" gap={6} align="center">
      {links.map((link) => (
        <Link key={link.href} href={link.href} variant="ghost" underline="none">
          <Text
            variant="low"
            hoverVariant="primary"
            weight="medium"
            size="xs"
            uppercase
          >
            {link.label}
          </Text>
        </Link>
      ))}
    </NavGroup>
  );
}