import {createFileRoute} from "@tanstack/react-router";
//import GridLayout from "react-grid-layout";
import "../../node_modules/react-grid-layout/css/styles.css";
import "../../node_modules/react-resizable/css/styles.css";

export const Route = createFileRoute("/")({
    component: Index,
});

function Index() {
    // const [layout, setLayout] = useState([
    //     {
    //         i: "PPOO",
    //         x: 0,
    //         y: 0,
    //         w: 5,
    //         h: 3,
    //         minW: 2,
    //         maxW: 6,
    //         minH: 2,
    //         maxH: 4,
    //         isResizable: true,
    //         isDraggable: true,
    //     },
    //     {i: "OCPLogs", x: 2, y: 0, w: 5, h: 3, isResizable: true, isDraggable: true},
    // ]);

    // const [cardData, setCardData] = useState([
    //     {i: "card1", name: "PPOO"},
    //     {i: "card2", name: "OCPLogs"},
    // ]);
    return (
        <>
            {/* <AddCards addCard={addCard} cards={cards} /> */}
            {/* <GridLayout className="layout" cols={12} rowHeight={30} width={window.innerWidth}>
                <div className="bg-blue-400" key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>
                    a
                </div>
                <div className="bg-blue-400" key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>
                    b
                </div>
                <div className="bg-blue-400" key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>
                    c
                </div>
            </GridLayout> */}
            <div className="m-auto">
                <span>Empty Space why dont you add some cards?</span>
            </div>
        </>
    );
}