// data/placementLayouts.data.js
//
// Declarative "wireframe recipe" per placement — powers <PlacementSkeleton />
// in the advertisement creation wizard so admins can see roughly where their
// ad will land before saving. Keys mirror PLACEMENTS in placement.data.js.
// Adding a new placement: add one entry here, nothing else needs to change.
//
// Block kinds:
//   nav      — thin top bar stand-in
//   bar      — a rounded block; `size` controls height (sm/md/lg/xl);
//              `highlight: true` marks it as the ad slot, `label` names it
//   filters  — a row of small pill shapes
//   grid     — a row of small equal boxes (card grid stand-in)
//   list     — a couple of thin stacked rows (table/list stand-in)
//   row      — a flex row of `columns`, each rendered like a `bar`
//
// `overlay` (optional, top-level) renders the base `blocks` dimmed with a
// centered floating highlighted box on top — used for popups.

export const PLACEMENT_LAYOUTS = {
    "dashboard.hero": {
        blocks: [
            { kind: "nav" },
            { kind: "bar", size: "xl", highlight: true, label: "Hero" },
            { kind: "list", label: "My Groups" },
            { kind: "grid", label: "Courses" },
        ],
    },
    "dashboard.popup": {
        blocks: [
            { kind: "nav" },
            { kind: "bar", size: "xl" },
            { kind: "list", label: "My Groups" },
            { kind: "grid", label: "Courses" },
        ],
        overlay: { label: "Popup" },
    },
    "course_list.banner": {
        blocks: [
            { kind: "nav" },
            { kind: "filters" },
            { kind: "bar", size: "md", highlight: true, label: "Banner" },
            { kind: "grid", label: "Course cards" },
        ],
    },
    "course_details.banner": {
        blocks: [
            { kind: "nav" },
            { kind: "bar", size: "lg", label: "Course hero" },
            { kind: "bar", size: "sm", highlight: true, label: "Banner" },
            { kind: "row", columns: [
                { label: "Course content", width: "flex-1" },
                { label: "Sidebar", width: "w-1/4" },
            ] },
        ],
    },
    "course_details.sidebar": {
        blocks: [
            { kind: "nav" },
            { kind: "bar", size: "lg", label: "Course hero" },
            { kind: "bar", size: "sm", label: "Banner" },
            { kind: "row", columns: [
                { label: "Course content", width: "flex-1" },
                { label: "Sidebar", width: "w-1/4", highlight: true },
            ] },
        ],
    },
    "plans.banner": {
        blocks: [
            { kind: "nav" },
            { kind: "bar", size: "md", highlight: true, label: "Banner" },
            { kind: "grid", label: "Plan cards" },
        ],
    },
};