'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { AlertTriangle } from 'lucide-react';
import React from 'react';

interface AppErrorBoundaryViewProps {
  title: string;
  description: string;
  children?: React.ReactNode;
}

/**
 * AppErrorBoundaryView
 * 
 * Semantic container for error boundary content.
 * Follows "Precision Racing Minimal" theme.
 */
export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
  return (
    <Stack alignItems="center" gap={6} fullWidth>
      {/* Header Icon */}
      <Surface 
        padding={4} 
        rounded="full" 
        bg="rgba(255, 190, 77, 0.1)" 
        border="1px solid rgba(255, 190, 77, 0.3)"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Icon icon={AlertTriangle} size={8} intent="warning" />
      </Surface>

      {/* Typography */}
      <Stack alignItems="center" gap={2}>
        <Heading level={1} weight="bold">
          {title}
        </Heading>
        <Text variant="low" align="center" maxWidth="32rem" leading="relaxed">
          {description}
        </Text>
      </Stack>

      {children}
    </Stack>
  );
}
