<div id="root" />

#root {
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nav-item {
  width: 100px;
  font-size: 14px;
  height: 40px;
}

@media screen and (min-width: 768px) {
  .nav-item {
    width: 300px;
    font-size: 22px;
    height: 80px;
  }
}

const tabs = [
  { id: "home", text: "Home" },
  { id: "about", text: "About me" },
  { id: "works", text: "My works" },
];

const MagicNav = () => {
  const [selectedTab, setSelectedTab] = React.useState("home");

  const flipRootId = "flipRoot";

  useFlip(flipRootId);

  return (
    <FlipProvider>
      <div
        data-flip-root-id={flipRootId}
        className="bg-gray-800 h-full flex justify-center items-center"
      >
        <div className="flex">
          {tabs.map((tab) => {
            return (
              <div
                key={tab.id}
                onClick={() => setSelectedTab(tab.id)}
                className="cursor-pointer text-white px-4 font-bold flex flex-col items-stretch text-center nav-item"
              >
                <div className="flex-1 hover:text-red-500">{tab.text}</div>
                {tab.id === selectedTab && (
                  <div
                    data-flip-id="highlight"
                    className="h-2 bg-red-500"
                  ></div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </FlipProvider>
  );
};

ReactDOM.render(<MagicNav />, document.getElementById("root"));