import { SyntheticEvent, useState } from "react";
import Tab from "@mui/base/TabUnstyled";
import Tabs from "@mui/base/TabsUnstyled";
import TabsList from "@mui/base/TabsListUnstyled";
import TabPanel from "@mui/base/TabPanelUnstyled";

import LibrayList from "components/library/LibrayList";

const tabs = ["History", "Favorite Books"];

const Library = () => {
  const [tab, setTab] = useState(tabs[0]);

  const handleTabChange = (
    event: SyntheticEvent<Element, Event>,
    value: string | number | boolean
  ) => {
    setTab(value as string);
  };

  return (
    <Tabs
      component={"main"}
      value={tab}
      className="bg-paper py-3"
      onChange={handleTabChange}
    >
      <div className="container">
        <h1>{tab}</h1>
        <TabsList className="tabs">
          {tabs.map((item) => (
            <Tab key={item} value={item} className="tab">
              {item}
            </Tab>
          ))}
        </TabsList>
      </div>
      <div className="container">
        {tabs.map((item) => (
          <TabPanel key={item} value={item}>
            <LibrayList type={item} />
          </TabPanel>
        ))}
      </div>
    </Tabs>
  );

  // <main className="container">
  //   <h2 className="novel-title">Popular This Week</h2>
  //   <ul className="novel-list">
  //     {/* {(data?.data || []).map((item) => (
  //       <NovelItem
  //         key={item.uri}
  //         slug={item.uri}
  //         img={item.img}
  //         name={item.name}
  //       />
  //     ))} */}
  //   </ul>
  // </main>
};

export default Library;