'use client';

import React from 'react';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface NotFoundActionsProps {
  primaryLabel: string;
  onPrimaryClick: () => void;
}

/**
 * NotFoundActions
 * 
 * Semantic component for the primary actions on the 404 page.
 * Follows "Precision Racing Minimal" theme with crisp styling.
 */
export function NotFoundActions({ primaryLabel, onPrimaryClick }: NotFoundActionsProps) {
  return (
    <Stack direction="row" gap={4} align="center" justify="center">
      <Button 
        variant="primary" 
        size="lg" 
        onClick={onPrimaryClick}
        minWidth="200px"
      >
        {primaryLabel}
      </Button>
      
      <Button
        variant="secondary"
        size="lg"
        onClick={() => window.history.back()}
      >
        <Stack direction="row" gap={2} align="center">
          <Box 
            width={2} 
            height={2} 
            rounded="full" 
            bg="soft-steel" 
          />
          <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-gray-400">
            Previous Sector
          </Text>
        </Stack>
      </Button>
    </Stack>
  );
}