import React, { useState } from 'react';
import { Tabs } from 'antd';
import CreditRecordsPage from './CreditRecordsPage';
import OrderRecordsPage from './OrderRecordsPage';

const UserCenterPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('credits');

  const tabs = [
    {
      key: 'credits',
      label: '积分明细',
    },
    {
      key: 'orders',
      label: '订单记录',
    },
  ];

  return (
    <div>
      <Tabs 
        activeKey={activeTab} 
        onChange={setActiveTab}
        items={tabs}
        style={{ marginBottom: 24 }}
        size="large"
      />
      {activeTab === 'credits' && <CreditRecordsPage />}
      {activeTab === 'orders' && <OrderRecordsPage />}
    </div>
  );
};

export default UserCenterPage;