import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';
import { Surface } from './primitives/Surface';

export interface SectionHeaderProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  actions?: ReactNode;
}

export const SectionHeader = ({ 
  title, 
  description, 
  icon, 
  intent = 'primary',
  actions 
}: SectionHeaderProps) => {
  return (
    <Box 
      padding={5} 
      borderBottom 
      style={{ background: 'linear-gradient(to right, var(--ui-color-bg-surface), transparent)' }}
    >
      <Box display="flex" alignItems="center" justifyContent="between">
        <Box display="flex" alignItems="center" gap={4}>
          {icon && (
            <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
              <Icon icon={icon} size={5} intent={intent} />
            </Surface>
          )}
          <Box>
            <Text size="lg" weight="bold" variant="high" block>
              {title}
            </Text>
            {description && (
              <Text size="sm" variant="low" block>
                {description}
              </Text>
            )}
          </Box>
        </Box>
        {actions && (
          <Box display="flex" alignItems="center" gap={3}>
            {actions}
          </Box>
        )}
      </Box>
    </Box>
  );
};