import React from 'react';
import { Card, Tabs, Button } from 'antd';
import { SendOutlined } from '@ant-design/icons';

const CommunicationPreview = () => {
  const items = [
    {
      key: '1',
      label: '邮件预览',
      children: (
        <div className="p-4 border rounded">
          <h2>邮件主题</h2>
          <div className="mt-4">邮件内容预览区域</div>
        </div>
      ),
    },
    {
      key: '2',
      label: '短信预览',
      children: (
        <div className="p-4 border rounded">
          <div className="mt-4">短信内容预览区域</div>
        </div>
      ),
    },
  ];

  return (
    <Card
      title="消息预览"
      extra={
        <Button type="primary" icon={<SendOutlined />}>
          发送测试
        </Button>
      }
    >
      <Tabs items={items} />
    </Card>
  );
};

export default CommunicationPreview;