"use client";
import React, { useState } from "react";
import RegisterFaceCount from "./registerFaceCount/RegisterFaceCount";
import HeadCount from "./headCount/HeadCount";

const RealtimeCount: React.FC = () => {
  const [activeTab, setActiveTab] = useState<
    "register-face-count" | "get-face-count"
  >("register-face-count");

  return (
    <div className="main-container">
      <div className="tabs">
        <button
          className={`tab-button ${
            activeTab === "register-face-count" ? "active" : ""
          }`}
          onClick={() => setActiveTab("register-face-count")}
        >
          Register Face Count
        </button>
        <button
          className={`tab-button ${
            activeTab === "get-face-count" ? "active" : ""
          }`}
          onClick={() => setActiveTab("get-face-count")}
        >
          Get Face Count
        </button>
      </div>
      <div className="tab-content">
        {activeTab === "register-face-count" && <RegisterFaceCount />}
        {activeTab === "get-face-count" && <HeadCount />}
      </div>
    </div>
  );
};

export default RealtimeCount;