import React from 'react';
import { Box } from './Box';

interface CardStackProps {
  children: React.ReactNode;
  gap?: 2 | 3 | 4 | 6 | 8;
}

/**
 * CardStack - A semantic UI component for stacking cards or panels.
 */
export function CardStack({ children, gap = 4 }: CardStackProps) {
  return (
    <Box display="flex" flexDirection="col" gap={gap}>
      {children}
    </Box>
  );
}