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

export const threeColumnGridTemplate: GridTemplate = {
  id: "threeColumn",
  name: "Three Column Layout",
  description: "Sidebar, main content, and right panel",
  width: 1200,
  height: 800,
  background: "#1a1a1a",
  cells: [
    { id: "sidebar-left", x: 10, y: 10, width: 200, height: 780 },

    { id: "main-top", x: 220, y: 10, width: 760, height: 380 },
    { id: "main-bottom-left", x: 220, y: 400, width: 370, height: 390 },
    { id: "main-bottom-right", x: 600, y: 400, width: 380, height: 390 },

    { id: "panel-top", x: 990, y: 10, width: 200, height: 380 },
    { id: "panel-bottom", x: 990, y: 400, width: 200, height: 390 },
  ],
};

export function ThreeColumnGrid() {
  return (
    <div
      style={{
        position: "absolute",
        width: `${threeColumnGridTemplate.width}px`,
        height: `${threeColumnGridTemplate.height}px`,
        background: threeColumnGridTemplate.background,
        "pointer-events": "none",
      }}
    >
      {threeColumnGridTemplate.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>
  );
}
