/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./content.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useState } from "react"
import WebsiteFaqs from "@/components/admin/WebsiteFaqs"
import WebsiteTestimonials from "@/components/admin/WebsiteTestimonials"

const WebsiteContent = ({ faqs, testimonials }: any) => {
  const [toggleActive, setToggleActive] = useState(1)

  console.log(testimonials)

  //Toggle Active State
  const toggleActiveState = (key: any) => {
    setToggleActive(key)
  }

  return (
    <div className={styles["content"]}>
      <PageIntro
        title="Website Content"
        description="Manage website content seamlessly from here"
      />
      <div className={styles["content__tab"]}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles["content__tab--item--active"]
              : styles["content__tab--item"]
          }
        >
          FAQs
        </div>

        <div
          onClick={() => toggleActiveState(2)}
          className={
            toggleActive === 2
              ? styles["content__tab--item--active"]
              : styles["content__tab--item"]
          }
        >
          Testimonials
        </div>

      </div>

      <div className={styles["content__children"]}>
        {toggleActive === 1 ? (
          <WebsiteFaqs faqs={faqs} />
        ) : toggleActive === 2 ? (
          <WebsiteTestimonials testimonials={testimonials} />
        ) : null }
      </div>
    </div>
  )
}

WebsiteContent.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="App Content Management System" children={page} />
)

export default WebsiteContent