import React from "react";
import { useSignals } from "@preact/signals-react/runtime";
import { signal } from "@preact/signals-react";
import Header from "./components/Header/header";
import StyleOptions from "./components/StyleOptions/style-options";
import SearchOptions from "./components/SearchOptions/search-options";
import SearchPreview from "./components/SearchPreview/search-preview";
import "./App.css";

// Backend data
export const post_id = signal(window.page_data.postId);
export const nonce = signal(window.page_data.nonce);
export const rest_url = signal(window.page_data.restUrl);
export const home_url = signal(window.page_data.homeUrl);
export const isNewPost = signal(window.page_data.isNewPost);
export const postStatus = signal(window.page_data.postStatus);
export const postType = signal(window.page_data.postType);
export const title = signal(window.page_data.title);
// Données du frontend

const App = () => {
	useSignals();
	// console.log(post_id, nonce, rest_url, isNewPost, postStatus, postType, title);
	return (
		<div className="search-builder-app">
			<Header />

			<div className="search-builder-content">
				<div className="search-builder-sidebar">
					<StyleOptions />
				</div>

				<div className="search-builder-main">
					<div className="search-builder-preview-section">
						<h2>Aperçu</h2>
						<SearchPreview />
					</div>

					<div className="search-builder-options-section">
						<h2>Options de recherche</h2>
						<SearchOptions />
					</div>
				</div>
			</div>
		</div>
	);
};

export default App;
