import React from 'react';
import { Box, SxProps, useTheme } from '@mui/material';
import { UserCardProps } from '../types';
import { mergeSx } from '../../Util/style';

interface DialogContainerProps {
  children: React.ReactNode;
  sx?: UserCardProps['sx'];
}

/**
 * 统一的卡片容器组件，处理常见的布局容器样式
 */
function DialogContainer({ children, sx = {} }: DialogContainerProps) {
  // Box变体，用于Minimal和NameOnly类型卡片
  const theme = useTheme();
  return (
    <Box
      sx={mergeSx(
        {
          p: 2,
          backgroundColor: theme.palette.background.paper,
          border: '1px solid',
          borderColor: 'divider',
          borderRadius: 1,
          maxWidth: 500,
          minWidth: 320,
          display: 'flex',
        },
        sx ? (sx as SxProps) : null
      )}>
      {children}
    </Box>
  );
}

export default DialogContainer;
