import { useState } from "react";
import { Messages } from "../../../Components/Notifications/Messages";
import TipAmountSettlementList from "./TipAmountSettlementList";
import EmployeeSettlement from "../EmployeeSettlement/EmployeeSettlement";
import "./Settlement.scss"; 

const Settlement = () => {
  const [selectedComponent, setSelectedComponent] = useState("tips");

  const messageType = "";
  const messageData = [];
  const onComplete = () => {};

  return (
    <div className="userPageTable">
      <div className="userPageContent">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />

        {/* ✅ Tabs */}
        <div className="formAddNew">
          <div className="settlementTabs">
            
            <div
              className={`tabItem ${
                selectedComponent === "tips" ? "active" : ""
              }`}
              onClick={() => setSelectedComponent("tips")}
            >
              Tip Settlement
            </div>

            <div
              className={`tabItem ${
                selectedComponent === "insentive" ? "active" : ""
              }`}
              onClick={() => setSelectedComponent("insentive")}
            >
              Incentive Settlement
            </div>

          </div>
        </div>

        {/* ✅ Content */}
        <div className="tabContent">
          {selectedComponent === "tips" ? (
            <TipAmountSettlementList />
          ) : (
            <EmployeeSettlement />
          )}
        </div>
      </div>
    </div>
  );
};

export default Settlement;