---
// Import necessary components and utilities
import { getStrapiMedia, getStrapiBaseUrl } from "../lib/strapi";
import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
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();

// Get current language
const currentLang = getLanguageFromPath(Astro.url.pathname);
---

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