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

interface CardContainerProps {
  children: React.ReactNode;
  cardType?: UserCardProps['cardType'];
  variant?: 'paper' | 'box';
  containerRef?: React.Ref<unknown>;
  sx?: UserCardProps['sx'];
}

/**
 * 统一的卡片容器组件，处理常见的布局容器样式
 */
function CardContainer({
  children,
  cardType = CardType.Detailed,
  variant = 'box',
  containerRef = undefined,
  sx = {},
}: CardContainerProps) {
  const commonStyles = {
    minWidth: 320,
    p: 2,
    borderRadius: 1,
    ...(cardType === CardType.Detailed
      ? {
          border: '1px solid',
          borderColor: 'divider',
        }
      : {}),
  };

  // Paper变体，用于Basic和Full类型卡片
  if (variant === 'paper') {
    return (
      <Paper ref={containerRef as React.Ref<HTMLDivElement>} elevation={0} sx={commonStyles}>
        {children}
      </Paper>
    );
  }

  // Box变体，用于Minimal和NameOnly类型卡片
  return (
    <Box
      ref={containerRef}
      sx={mergeSx(
        commonStyles,
        {
          display: 'flex',
          alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
          gap: 2,
        },
        sx ? (sx as SxProps) : null
      )}>
      {children}
    </Box>
  );
}

export default CardContainer;
