import type { GridTemplate } from "../types/grid";

export const sidebarContentGridTemplate: GridTemplate = {
  id: "sidebarContent",
  name: "Sidebar Content Layout",
  description: "Two long sidebars with large content in middle",
  width: 1400,
  height: 900,
  background: "#1a1a1a",
  cells: [
    { id: "left-sidebar", x: 10, y: 10, width: 280, height: 880 },

    { id: "main-content", x: 300, y: 10, width: 800, height: 880 },

    { id: "right-sidebar", x: 1110, y: 10, width: 280, height: 880 },
  ],
};

export function SidebarContentGrid() {
  return (
    <div
      style={{
        position: "absolute",
        width: `${sidebarContentGridTemplate.width}px`,
        height: `${sidebarContentGridTemplate.height}px`,
        background: sidebarContentGridTemplate.background,
        "pointer-events": "none",
      }}
    >
      {sidebarContentGridTemplate.cells.map((cell) => (
        <div
          data-grid-cell={cell.id}
          style={{
            position: "absolute",
            left: `${cell.x}px`,
            top: `${cell.y}px`,
            width: `${cell.width}px`,
            height: `${cell.height}px`,
            border: "2px dashed rgba(255, 255, 255, 0.2)",
            "border-radius": "12px",
            "box-sizing": "border-box",
            background: "rgba(255, 255, 255, 0.03)",
          }}
        />
      ))}
    </div>
  );
}
