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

interface SectionHeaderProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  color?: string;
  actions?: ReactNode;
}

export function SectionHeader({ title, description, icon, color = 'text-primary-blue', actions }: SectionHeaderProps) {
  return (
    <Box 
      p={5} 
      borderBottom 
      borderColor="border-white/5" 
      style={{ background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}
    >
      <Stack direction="row" align="center" justify="between" wrap gap={4}>
        <Stack direction="row" align="center" gap={3}>
          {icon && (
            <Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
              <Icon icon={icon} size={5} color={color} />
            </Surface>
          )}
          <Box>
            <Text size="lg" weight="bold" color="text-white" block>
              {title}
            </Text>
            {description && (
              <Text size="sm" color="text-gray-400" block>
                {description}
              </Text>
            )}
          </Box>
        </Stack>
        {actions && (
          <Box>
            {actions}
          </Box>
        )}
      </Stack>
    </Box>
  );
}