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

export const centeredFocusGridTemplate: GridTemplate = {
  id: "centeredFocus",
  name: "Centered Focus Layout",
  description: "2 center items with left sidebar boxes and tall right panel",
  width: 1520,
  height: 760,
  background: "#1a1a1a",
  cells: [
    { id: "left-top", x: 10, y: 10, width: 390, height: 340 },
    { id: "left-bottom", x: 10, y: 360, width: 390, height: 390 },

    { id: "center-top", x: 410, y: 10, width: 760, height: 250 },
    { id: "center-bottom", x: 410, y: 270, width: 760, height: 480 },

    { id: "right-tall", x: 1180, y: 10, width: 330, height: 740 },
  ],
};

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