import React, { ReactNode } from 'react';
import { Card } from './Card';
import { Box } from './primitives/Box';
import { Heading } from './Heading';
import { IconButton } from './IconButton';
import { X } from 'lucide-react';

export interface DebugPanelProps {
  title: string;
  children: ReactNode;
  onClose: () => void;
  icon?: ReactNode;
}

export const DebugPanel = ({ title, children, onClose, icon }: DebugPanelProps) => {
  return (
    <Box position="fixed" style={{ bottom: '1rem', left: '1rem', width: '20rem', zIndex: 100 }}>
      <Card variant="dark" padding={0}>
        <Box display="flex" alignItems="center" justifyContent="between" padding={3} bg="var(--ui-color-bg-surface-muted)" style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}>
          <Box display="flex" alignItems="center" gap={2}>
            {icon}
            <Heading level={6}>{title}</Heading>
          </Box>
          <IconButton icon={X} size="sm" variant="ghost" onClick={onClose} />
        </Box>
        <Box padding={3}>
          {children}
        </Box>
      </Card>
    </Box>
  );
};