import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import "./editor.scss";
import { useEntityRecords } from "@wordpress/core-data";
import { InnerBlocks } from "@wordpress/block-editor";
export default function Edit() {
	const lang = "fr";

	// const items = useEntityRecords("postType", "post", {
	// 	per_page: -1,
	// 	status: "publish",
	// 	// taxonomy: "news_type",
	// 	news_type: [1],
	// });
	const newsPosts = useSelect((select) =>
		select("core").getEntityRecords("postType", "post", {
			per_page: -1,
			status: "publish",
			news_type: [95],
		})
	);

	return (
		<section
			{...useBlockProps({
				className: `homegrade-blocks-communiques-presse-feed`,
			})}
		>
			<InnerBlocks
				allowedBlocks={[
					"homegrade-content-blocks/section-titling",
					"core/paragraph",
				]}
				template={[
					[
						"homegrade-content-blocks/section-titling",
						{
							sectionTitle: __("Communiqués de presse", "homegrade-blocks"),
						},
					],
				]}
				templateLock={true}
			/>
			<p className="temp_guidance_sentence">
				{__(
					"Les communiqués de presses seront affichés ici",
					"homegrade-blocks__text-backoffice"
				)}
			</p>

			<div class="card-grid-container">
				{newsPosts &&
					newsPosts.map((post) => {
						return (
							<>
								<div className="card-news">
									{/* <?php echo $post_thumbnail ?> */}
									<div class="card-news__inner">
										<div class="card-news__heading">
											<h3 class="card-news__title">{post.title.rendered}</h3>
										</div>

										<a
											href="#"
											class="cta cta--read-more cta--with-arrow-button cta--streched  "
										>
											<span>{__("Lire l'article", "homegrade-blocks")}</span>
											<span class="sr-only">{post.title.rendered}</span>
											<img
												class="cta_arrow_button"
												src="<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg"
												alt=""
											/>
										</a>
									</div>
								</div>
							</>
						);
					})}
			</div>
		</section>
	);
}