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

export interface BulkActionsProps {
  children: ReactNode;
  selectedCount: number;
  isOpen: boolean;
}

export const BulkActions = ({ children, selectedCount, isOpen }: BulkActionsProps) => {
  if (!isOpen) return null;

  return (
    <Box 
      position="fixed" 
      style={{ bottom: '2rem', left: '50%', transform: 'translateX(-50%)', zIndex: 100 }}
    >
      <Surface variant="glass" rounded="xl" shadow="xl" padding={4} style={{ border: '1px solid var(--ui-color-intent-primary)' }}>
        <Box display="flex" alignItems="center" gap={8}>
          <Box display="flex" alignItems="center" gap={3}>
            <Badge variant="primary">{selectedCount}</Badge>
            <Text size="sm" weight="bold" variant="high">Items Selected</Text>
          </Box>
          <Box width="1px" height="1.5rem" bg="var(--ui-color-border-default)" />
          <Box display="flex" alignItems="center" gap={3}>
            {children}
          </Box>
        </Box>
      </Surface>
    </Box>
  );
};