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

export interface PanelProps {
  title?: string;
  description?: string;
  children: ReactNode;
  footer?: ReactNode;
  variant?: 'default' | 'dark' | 'muted';
}

export const Panel = ({ 
  title, 
  description, 
  children, 
  footer,
  variant = 'default' 
}: PanelProps) => {
  return (
    <Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
      {(title || description) && (
        <Box padding={6} borderBottom>
          {title && <Heading level={3} marginBottom={1}>{title}</Heading>}
          {description && <Text size="sm" variant="low">{description}</Text>}
        </Box>
      )}
      
      <Box padding={6}>
        {children}
      </Box>
      
      {footer && (
        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
          {footer}
        </Box>
      )}
    </Surface>
  );
};