import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import { useSearchParams } from 'react-router-dom';
import CreditRecordsPage from './CreditRecordsPage';
import OrderRecordsPage from './OrderRecordsPage';

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

  useEffect(() => {
    const tab = searchParams.get('tab') || 'credits';
    if (tab === 'orders') {
      setActiveTab('orders');
    } else {
      setActiveTab('credits');
    }
  }, [searchParams]);

  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;