"use client"

import Dashboard from "@/component/Dashboard"
import HomeFeed from "@/component/HomeFeed"
import Header from "@/component/Layout/Header"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import { dashboardActiveTabState, EDashboardTab, titleState } from "@/recoil"
import { Fragment, useEffect } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

export default function HomeContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const [activeTab, setActiveTab] = useRecoilState(dashboardActiveTabState)
  useEffect(() => {
    setPageTitle("Dashboard")
  }, [])
  const handleChangeTab = (value: EDashboardTab) => {
    setActiveTab(value)
  }
  const options = [
    { value: EDashboardTab.feed, label: "Wizzor Feed" },
    { value: EDashboardTab.analytics, label: "Analytics" },
  ]
  return (
    <Fragment>
      <Header
        slot={
          <SegmentedHeader
            value={activeTab}
            options={options}
            onChange={(value) => handleChangeTab(value as EDashboardTab)}
          />
        }
      />
      <main
        id="main-content"
        className="flex-1 px-4 lg:px-5 xl:px-6 overflow-y-auto pt-4 pb-6 overflow-x-hidden">
        {activeTab === EDashboardTab.feed ? <HomeFeed /> : <Dashboard />}
      </main>
    </Fragment>
  )
}