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

export interface PageHeroProps {
  title: string;
  description?: string;
  children?: ReactNode;
  image?: ReactNode;
}

export const PageHero = ({ 
  title, 
  description, 
  children,
  image 
}: PageHeroProps) => {
  return (
    <Surface 
      variant="dark" 
      rounded="xl" 
      padding={8} 
      style={{ position: 'relative', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}
    >
      <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems="center" gap={8}>
        <Box flex={1}>
          <Heading level={1} marginBottom={4}>{title}</Heading>
          {description && (
            <Text size="lg" variant="low" marginBottom={6} block>
              {description}
            </Text>
          )}
          {children}
        </Box>
        {image && (
          <Box flex={1} display="flex" justifyContent="center">
            {image}
          </Box>
        )}
      </Box>
      
      {/* Decorative elements */}
      <Box 
        position="absolute" 
        top="-4rem" 
        right="-4rem" 
        width="16rem" 
        height="16rem" 
        bg="var(--ui-color-intent-primary)" 
        style={{ opacity: 0.05, filter: 'blur(64px)', borderRadius: '9999px' }} 
      />
    </Surface>
  );
};