"use client";
import React, { useState } from "react";
import WebcamDetection from "./webcam/Webcam";
import RtspStream from "./rtspStream/RtspStream";

const RealtimeDetection: React.FC = () => {
  const [activeTab, setActiveTab] = useState<"webcam" | "rtsp">("webcam");

  return (
    <div className="main-container">
      <div className="tabs">
        <button
          className={`tab-button ${activeTab === "webcam" ? "active" : ""}`}
          onClick={() => setActiveTab("webcam")}
        >
          Webcam
        </button>
        <button
          className={`tab-button ${activeTab === "rtsp" ? "active" : ""}`}
          onClick={() => setActiveTab("rtsp")}
        >
          RTSP
        </button>
      </div>
      <div className="tab-content">
        {activeTab === "webcam" && <WebcamDetection />}
        {activeTab === "rtsp" && <RtspStream />}
      </div>
    </div>
  );
};

export default RealtimeDetection;