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

export interface PanelProps {
  title?: string;
  description?: string;
  children: ReactNode;
  footer?: ReactNode;
  variant?: 'default' | 'dark' | 'muted';
  padding?: Spacing;
  actions?: ReactNode;
  className?: string;
  border?: boolean;
  rounded?: string;
  borderColor?: string;
  bg?: string;
}

export const Panel = ({ 
  title, 
  description, 
  children, 
  footer,
  variant = 'default',
  padding = 6,
  actions,
  className,
  border,
  rounded,
  borderColor,
  bg
}: PanelProps) => {
  return (
    <Surface 
      variant={variant} 
      rounded={(rounded as any) || "lg"} 
      style={{ 
        border: border === false ? 'none' : `1px solid ${borderColor || 'var(--ui-color-border-default)'}`,
        backgroundColor: bg ? (bg.startsWith('bg-') ? undefined : bg) : undefined
      }}
      className={className}
    >
      {(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>
  );
};
