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

export const simpleGridTemplate: GridTemplate = {
  id: "simple",
  name: "Simple 2x2 Grid",
  description: "Basic 2x2 grid layout",
  width: 800,
  height: 600,
  background: "#1a1a1a",
  cells: [
    { id: "cell-1", x: 10, y: 10, width: 385, height: 285 },
    { id: "cell-2", x: 405, y: 10, width: 385, height: 285 },
    { id: "cell-3", x: 10, y: 305, width: 385, height: 285 },
    { id: "cell-4", x: 405, y: 305, width: 385, height: 285 },
  ],
};

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