import { useState } from "react";
import Base from "./base";
import { Surface, Tabs } from "@heroui/react";
import { Inventory } from "~/components/inventory";

export function InventoryPage() {
    const [side, setSide] = useState<"T" | "CT">("T");
    return (
        <Base needsLogin fixedHeight>
            <Surface
                className="flex flex-col flex-1 min-h-0 h-0 shadow-lg shadow-indigo-900 ring-1 ring-indigo-800 p-2 m-2 rounded-3xl gap-2"
                variant="default"
            >
                <div className="w-full h-min flex">
                    <Tabs
                        selectedKey={side}
                        onSelectionChange={(key) => {
                            switch (key) {
                                case "T": {
                                    setSide("T");
                                    break;
                                }
                                case "CT": {
                                    setSide("CT");
                                    break;
                                }
                            }
                        }}
                    >
                        <Tabs.ListContainer>
                            <Tabs.List>
                                <Tabs.Tab className="w-fit" id="T">
                                    Terrorist
                                    <Tabs.Indicator />
                                </Tabs.Tab>
                                <Tabs.Tab className="w-fit" id="CT">
                                    Counter-Terrorist
                                    <Tabs.Indicator />
                                </Tabs.Tab>
                            </Tabs.List>
                        </Tabs.ListContainer>
                    </Tabs>
                </div>
                <Inventory side={side} />
            </Surface>
        </Base>
    );
}