'use client';

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

interface SectionHeaderProps {
  icon: LucideIcon;
  title: string;
  description?: string;
  action?: React.ReactNode;
  color?: string;
}

export function SectionHeader({ 
  icon, 
  title, 
  description,
  action,
  color = '#3b82f6' 
}: SectionHeaderProps) {
  return (
    <Box p={5} style={{ borderBottom: '1px solid #262626', background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}>
      <Stack direction="row" align="center" justify="between" wrap gap={4}>
        <Box>
          <Stack direction="row" align="center" gap={3}>
            <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)' }}>
              <Icon icon={icon} size={5} color={color} />
            </Surface>
            <Box>
              <Heading level={2}>{title}</Heading>
              {description && (
                <Text size="sm" color="text-gray-500" block mt={1}>{description}</Text>
              )}
            </Box>
          </Stack>
        </Box>
        {action && <Box>{action}</Box>}
      </Stack>
    </Box>
  );
}