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

export const dashboardGridTemplate: GridTemplate = {
  id: "dashboard",
  name: "Dashboard Layout",
  description: "Professional dashboard with header and mixed sizes",
  width: 1400,
  height: 900,
  background: "#1a1a1a",
  cells: [
    { id: "header", x: 10, y: 10, width: 1380, height: 120 },

    { id: "metric-1", x: 10, y: 140, width: 330, height: 200 },
    { id: "metric-2", x: 350, y: 140, width: 330, height: 200 },
    { id: "metric-3", x: 690, y: 140, width: 330, height: 200 },
    { id: "metric-4", x: 1030, y: 140, width: 360, height: 200 },

    { id: "chart-main", x: 10, y: 350, width: 880, height: 540 },
    { id: "info-top", x: 900, y: 350, width: 490, height: 260 },
    { id: "info-bottom", x: 900, y: 620, width: 490, height: 270 },
  ],
};

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