import React, { ReactNode } from 'react';
import { Surface } from './primitives/Surface';
import { Box, Spacing } 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';
  padding?: Spacing;
  actions?: ReactNode;
}

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