"use client"

import React, { useEffect, useState } from "react"
import { Tabs } from "antd"
import { filter } from "lodash"
import { useRecoilValue } from "recoil"
import { typeBookState } from "@/recoil"
import AllBooks from "./AllBooks"
import classNames from "classnames"
import { BooksCss } from "./style"
import MyBooks from "./MyBooks"
import MyFavoriteBooks from "./MyFavorite"

type IProps = {
  categories: Array<any>
}

const Books = ({ categories }: IProps) => {
  const typeBook = useRecoilValue(typeBookState)

  const items = [
    {
      label: "",
      key: "all",
      children: <AllBooks categories={categories} />,
      disabled: false,
    },
    {
      label: "",
      key: "my",
      children: <MyBooks />,
      disabled: false,
    },
    {
      label: "",
      key: "favorite",
      children: <MyFavoriteBooks />,
      disabled: false,
    },
  ]

  return (
    <Tabs
      className={classNames(`h-full`, BooksCss)}
      activeKey={typeBook}
      items={filter(items, { disabled: false })}
    />
  )
}

export default Books