import React from 'react';
import './Card.css';

/**
 * Aurora Admin Card（React）
 * 对齐 card.json 契约：
 *  - style:   bordered | shadowed
 *  - padding: 16 | 24
 *  - section: title（含右侧 extra）/ content / actions
 */
export default function Card({
  title = '',
  bordered = false,
  shadowed = false,
  padding = 16,
  className = '',
  children,
  extra,
  actions
}) {
  const paddingPx = typeof padding === 'number' ? `${padding}px` : padding;
  const classes = [
    'aa-card',
    bordered ? 'aa-card--bordered' : '',
    shadowed ? 'aa-card--shadowed' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div className={classes} style={{ padding: paddingPx }}>
      {(title || extra) && (
        <div className="aa-card__header">
          <div className="aa-card__title">{title}</div>
          {extra && <div className="aa-card__extra">{extra}</div>}
        </div>
      )}
      <div className="aa-card__body">{children}</div>
      {actions && <div className="aa-card__actions">{actions}</div>}
    </div>
  );
}

/*
用法示例：
import Card from './Card';

<Card title="客户详情" extra={<a>查看全部</a>} shadowed padding={24}>
  内容区...
</Card>
<Card title="操作卡片" bordered actions={<><button>取消</button><button>确定</button></>}>
  内容区...
</Card>
*/