import React from 'react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Text } from './Text';

export interface SectionHeaderProps {
  title: string;
  description?: string;
  actions?: ReactNode;
  loading?: ReactNode;
  variant?: 'default' | 'minimal';
}

export const SectionHeader = ({ 
  title, 
  description, 
  actions,
  loading,
  variant = 'default'
}: SectionHeaderProps) => {
  const isMinimal = variant === 'minimal';

  return (
    <Box 
      position="relative" 
      paddingBottom={isMinimal ? 0 : 4} 
      style={isMinimal ? {} : { borderBottom: '1px solid var(--ui-color-border-muted)' }}
      marginBottom={isMinimal ? 4 : 6}
    >
      <Box display="flex" alignItems="center" justifyContent="between">
        <Box>
          <Heading level={isMinimal ? 3 : 2} weight="bold">{title}</Heading>
          {description && (
            <Text size={isMinimal ? 'xs' : 'sm'} variant="low" block marginTop={1}>
              {description}
            </Text>
          )}
        </Box>
        {actions && (
          <Box display="flex" alignItems="center" gap={3}>
            {actions}
          </Box>
        )}
      </Box>
      {loading && (
        <Box position="absolute" bottom={0} left={0} fullWidth>
          {loading}
        </Box>
      )}
    </Box>
  );
};