"use client";
import React, { useState } from "react";
import Register from "./register/Register";
import Search from "./search/Search";
import "./MainForm.css";
import RealtimeFaceDetection from "./realtimeFaceDetection/RealtimeFaceDetection";
import FaceLiveness from "./faceLivelinessCheck/FaceLivelinessCheck";
import FaceMovementDetection from "./faceMovementDetection/FaceMovementDetection";
import RealtimeCount from "./realtimeCount/RealtimeCount";

const MainForm: React.FC = () => {
  const [activeTab, setActiveTab] = useState<
    | "register"
    | "search"
    | "realtime"
    | "liveliness"
    | "realtime-count"
    | "facemovement"
  >("register");

  return (
    <div className="main-container">
      <div className="tabs">
        <button
          className={`tab-button ${activeTab === "register" ? "active" : ""}`}
          onClick={() => setActiveTab("register")}
        >
          Register
        </button>
        <button
          className={`tab-button ${activeTab === "search" ? "active" : ""}`}
          onClick={() => setActiveTab("search")}
        >
          Search
        </button>
        <button
          className={`tab-button ${activeTab === "realtime" ? "active" : ""}`}
          onClick={() => setActiveTab("realtime")}
        >
          Realtime Detection
        </button>
        {/* <button
          className={`tab-button ${activeTab === "liveliness" ? "active" : ""}`}
          onClick={() => setActiveTab("liveliness")}
        >
          Liveliness Detection
        </button> */}
        <button
          className={`tab-button ${
            activeTab === "realtime-count" ? "active" : ""
          }`}
          onClick={() => setActiveTab("realtime-count")}
        >
          Realtime Count
        </button>
        <button
          className={`tab-button ${
            activeTab === "facemovement" ? "active" : ""
          }`}
          onClick={() => setActiveTab("facemovement")}
        >
          Face Movement Detection
        </button>
      </div>
      <div className="tab-content">
        {activeTab === "register" && <Register />}
        {activeTab === "search" && <Search />}
        {activeTab === "realtime" && <RealtimeFaceDetection />}
        {activeTab === "liveliness" && <FaceLiveness />}
        {activeTab === "realtime-count" && <RealtimeCount />}
        {activeTab === "facemovement" && <FaceMovementDetection />}
      </div>
    </div>
  );
};

export default MainForm;