'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
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 (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
      {/* Header Icon */}
      <div 
        style={{ 
          padding: '1rem', 
          borderRadius: '9999px', 
          backgroundColor: 'rgba(255, 190, 77, 0.1)', 
          border: '1px solid rgba(255, 190, 77, 0.3)' 
        }}
      >
        <Icon icon={AlertTriangle} size={8} intent="warning" />
      </div>

      {/* Typography */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
        <Heading level={1} weight="bold">
          {title}
        </Heading>
        <Text variant="low" align="center" style={{ maxWidth: '32rem' }} leading="relaxed">
          {description}
        </Text>
      </div>

      {children}
    </div>
  );
}
