'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, Layers, Loader2, RefreshCw } from 'lucide-react';
import { useApiData } from '../../lib/useApiData.js';
export function PageTemplates({ onNavigate }) {
    const { data, loading, error, refetch } = useApiData('/page-templates');
    const templates = data ?? [];
    if (loading) {
        return (_jsxs("div", { className: "flex h-64 items-center justify-center p-4", role: "status", "aria-live": "polite", children: [_jsx(Loader2, { className: "text-primary h-6 w-6 animate-spin" }), _jsx("span", { className: "sr-only", children: "Loading page templates" })] }));
    }
    return (_jsxs("div", { className: "p-4 pr-8", children: [error && (_jsxs("div", { className: "border-border bg-card mb-4 flex items-center gap-3 rounded-lg border p-3", children: [_jsx(AlertTriangle, { className: "text-muted-foreground h-5 w-5 shrink-0" }), _jsx("span", { className: "text-foreground flex-1 text-sm", children: error }), _jsx("button", { type: "button", onClick: refetch, className: "border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm", children: "Retry" })] })), _jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-foreground mb-1 text-2xl font-medium", children: "Page Templates" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [templates.length, " saved template", templates.length === 1 ? '' : 's'] })] }), _jsxs("button", { type: "button", onClick: refetch, className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium", children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Refresh"] })] }), templates.length === 0 ? (_jsxs("div", { className: "border-border bg-card rounded-lg border p-8 text-center", children: [_jsx(Layers, { className: "text-muted-foreground mx-auto mb-3 h-8 w-8" }), _jsx("h2", { className: "text-foreground mb-1 text-lg font-medium", children: "No page templates yet" }), _jsx("p", { className: "text-muted-foreground mb-4 text-sm", children: "Built-in templates are seeded by the CMS when the templates API is available." }), _jsx("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", children: "View Saved Sections" })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", children: templates.map((template) => (_jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-foreground text-base font-medium", children: template.name ?? 'Untitled template' }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: template.description ?? 'No description provided.' })] }), template.builtIn && (_jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs", children: "Built-in" }))] }), _jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-sm", children: [_jsx("span", { children: template.category ?? 'content' }), _jsx("span", { children: template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : '' })] })] }, template.id))) }))] }));
}
//# sourceMappingURL=PageTemplates.js.map