'use client'

import { LayoutGrid } from 'lucide-react'

export interface WidgetsProps {
  onNavigate?: (path: string) => void
}

/**
 * /widgets — placeholder for the embeddable Widgets library.
 *
 * Widgets are reusable, embeddable components (forms, CTAs, banners)
 * that can be dropped into pages and saved sections. The management UI
 * ships in a later release; this view establishes the route and nav
 * entry with an honest empty state rather than a dead link.
 */
export function Widgets({ onNavigate }: WidgetsProps) {
  return (
    <div className="p-4 pr-8">
      <div className="mb-4">
        <h1 className="text-foreground mb-1 text-2xl font-medium">Widgets</h1>
        <p className="text-muted-foreground text-sm">
          Reusable, embeddable components for pages and saved sections.
        </p>
      </div>

      <div className="border-border bg-card rounded-lg border p-8 text-center">
        <LayoutGrid className="text-muted-foreground mx-auto mb-3 h-8 w-8" aria-hidden />
        <h2 className="text-foreground mb-1 text-lg font-medium">Widgets are coming soon</h2>
        <p className="text-muted-foreground mx-auto mb-4 max-w-md text-sm">
          The widget library lets you build embeddable components once and reuse them across pages.
          In the meantime, use Saved Sections for reusable content blocks.
        </p>
        <button
          type="button"
          onClick={() => onNavigate?.('/saved-sections')}
          className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium hover:opacity-90"
        >
          View Saved Sections
        </button>
      </div>
    </div>
  )
}
