'use client';

import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
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 (
    <Stack direction="row" gap={6} align="center" wrap center>
      {links.map((link, index) => (
        <React.Fragment key={link.href}>
          <Stack 
            as="a" 
            href={link.href}
            transition
            display="inline-block"
          >
            <Text
              color="text-gray-400"
              hoverTextColor="primary-accent"
              weight="medium"
              size="xs"
              letterSpacing="widest"
              uppercase
            >
              {link.label}
            </Text>
          </Stack>
          {index < links.length - 1 && (
            <Stack width="1px" height="12px" bg="border-gray" opacity={0.5} />
          )}
        </React.Fragment>
      ))}
    </Stack>
  );
}