---
// Import necessary components and utilities
import MarkdownComponent from "./MardownContent.astro";
import { getStrapiMedia } from "../utils/strapi";
import { getStrapiBaseUrl } from "../config/strapi";
import type { HTMLAttributes } from "astro/types";

// Define the props interface
export interface Props extends HTMLAttributes<'div'> {
	elements: any[];
}

// Destructure props and get BASE_URL from global config
const { elements, ...otherProps } = Astro.props;
const BASE_URL = getStrapiBaseUrl();
---

<div {...otherProps}>
	{
		elements.map((poleElement) => (
			<a href={`/elements/${poleElement.id}`} class="block">
				<article class="flex items-center bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-200">
					<img
						src={getStrapiMedia(
							poleElement.data.mainImage.url,
							BASE_URL,
						)}
						alt={poleElement.data.mainImage.alternativeText}
						class="w-24 h-24 object-cover flex-shrink-0"
					/>
					<div class="p-4">
						<h2 class="text-xl font-bold">
							{poleElement.data.name}
						</h2>
					</div>
				</article>
			</a>
		))
	}
</div> 