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

interface PageHeaderProps {
  icon: LucideIcon;
  title: string;
  description?: string;
  action?: React.ReactNode;
  iconGradient?: string;
  iconBorder?: string;
}

export function PageHeader({ 
  icon, 
  title, 
  description,
  action,
  iconGradient = 'from-iron-gray to-deep-graphite',
  iconBorder = 'border-charcoal-outline',
}: PageHeaderProps) {
  return (
    <Box mb={8}>
      <Stack direction="row" align="center" justify="between" wrap gap={4}>
        <Box>
          <Stack direction="row" align="center" gap={4}>
            <Surface variant="muted" rounded="xl" border padding={3} className={`bg-gradient-to-br ${iconGradient} ${iconBorder}`}>
              <Icon icon={icon} size={7} color="#d1d5db" />
            </Surface>
            <Box>
              <Heading level={1}>{title}</Heading>
              {description && (
                <Text color="text-gray-400" block mt={1}>{description}</Text>
              )}
            </Box>
          </Stack>
        </Box>
        {action && <Box>{action}</Box>}
      </Stack>
    </Box>
  );
}