"use client";
import React, { useState } from 'react';
import CouponList from './CouponList';
import GiftCardList from './GiftCardList';
const TabButton: React.FC = () => {
 const [activeTab, setActiveTab] = useState<'coupon' | 'giftcard'>('coupon');
  return (
    <div>
      {/* Tab 切换栏 */}
      <div className="flex w-full">
        {/* My Coupon Tab */}
        <button
          onClick={() => setActiveTab("coupon")}
          className={`flex-1 py-3 text-center font-medium ${
            activeTab === "coupon"
              ? "bg-black text-white "
              : "bg-white text-black"
          }`}
        >
          My Coupon
        </button>
        {/* My Giftcard Tab */}
        <button
          onClick={() => setActiveTab("giftcard")}
          className={`flex-1 py-3 text-center font-medium ${
            activeTab === "giftcard"
              ? "bg-black text-white"
              : "bg-white text-black"
          }`}
        >
          My Giftcard
        </button>
      </div>

      {/* 内容展示区 */}
      <div className="mt-2">
        {activeTab === "coupon" ? <CouponList /> : <GiftCardList />}
      </div>
    </div>
  );
};
export default TabButton;
