"use client";

import {
  LayoutGrid,
  Settings,
  Users,
  BarChart,
  Box,
} from "lucide-react";
import {
  PageTemplate,
} from "@/components/layout/page-template";
import { Badge } from "@/components/ui/badge";

const SANDBOX_NAV_ITEMS = [
  { title: "Nav Item 1", icon: LayoutGrid, href: "#item1" },
  { title: "Nav Item 2", icon: Box, href: "#item2" },
  { title: "Nav Item 3", icon: Users, href: "#item3" },
  { title: "Nav Item 4", icon: Settings, href: "#item4" },
];

export default function SandboxPage() {
  // Mock navigation items for the sidebar
  const sidebarItems = SANDBOX_NAV_ITEMS.map((item) => ({
    ...item,
    href: item.href, 
    isActive: item.title === "Nav Item 1", // Mock active state
    badge: item.title === "Nav Item 2" ? "New" : undefined,
  }));

  return (
    <PageTemplate
      sidebar={{
        items: sidebarItems,
        customContent: (
          <div className="space-y-4">
            <div className="px-2 py-1 bg-dashed border border-dashed border-muted-foreground/30 rounded text-xs text-center text-muted-foreground uppercase tracking-wider">
              Custom Component Area
            </div>
            
            {/* Mock Custom Component Example */}
            <div className="space-y-2 opacity-70">
              <h3 className="text-sm font-medium">Example Widget</h3>
              <div className="p-3 rounded bg-muted/50 text-xs text-muted-foreground">
                This area fills the remaining sidebar height and can hold any custom React component (checklists, filters, etc).
              </div>
            </div>
          </div>
        ),
      }}
    >
      {/* Empty Main Content Area */}
      <div className="border-2 border-dashed border-muted-foreground/20 rounded-lg h-[400px] flex items-center justify-center text-muted-foreground">
        <p>Main Content Area (Empty)</p>
      </div>
    </PageTemplate>
  );
}