import {useState} from "react";
import Skills from "../modules/skills/components/Skills.tsx";
import Combat from "../modules/combat/components/Combat.tsx";
import Equipment from "../modules/equipment/components/Equipment.tsx";
import Attributes from "../modules/attributes/components/Attributes.tsx";
import State from "../modules/state/components/State.tsx";
import Magic from "../modules/magic/components/Magic.tsx";
import Religion from "../modules/religion/components/Religion.tsx";
import Notes from "../modules/notes/components/Notes.tsx";
import type {CharacterData} from "../../../types/CharacterJson.ts";

export default function Tabs({jsonData}: { jsonData: CharacterData }) {
  const [activeTab, setActiveTab] = useState("skills");
  
  const handleTabClick = (tab: string) => {
    setActiveTab(tab);
  };
  
  return (
      <div className="w-full mt-4">
        <div className="flex justify-evenly flex-wrap gap-2 border-t border-gray-400 py-5">
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "skills"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("skills")}
          >
            Skills
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "combat"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("combat")}
          >
            Combat
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "attributes"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("attributes")}
          >
            Attributes
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "equipment"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("equipment")}
          >
            Equipment
          </button>
          
          {/* Break flex row */}
          <div className="basis-full"></div>
          
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "state"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("state")}
          >
            State
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "magic"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("magic")}
          >
            Magic
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "religion"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("religion")}
          >
            Religion
          </button>
          <button
              className={`px-4 py-2 bg-transparent w-[20%] ${
                  activeTab === "notes"
                      ? "text-violet-500"
                      : "text-gray-500"
              }`}
              onClick={() => handleTabClick("notes")}
          >
            Notes
          </button>
        </div>
        <div className="p-4">
          {activeTab === "skills" && (
              <div>
                <Skills jsonData={jsonData}/>
              </div>
          )}
          {activeTab === "combat" && (
              <div>
                <Combat/>
              </div>
          )}
          {activeTab === "attributes" && (
              <div>
                <Attributes/>
              </div>
          )}
          {activeTab === "equipment" && (
              <div>
                <Equipment/>
              </div>
          )}
          {activeTab === "state" && (
              <div>
                <State/>
              </div>
          )}
          {activeTab === "magic" && (
              <div>
                <Magic/>
              </div>
          )}
          {activeTab === "religion" && (
              <div>
                <Religion/>
              </div>
          )}
          {activeTab === "notes" && (
              <div>
                <Notes/>
              </div>
          )}
        </div>
      </div>
  );
}
