'use client';

import { cn } from "../../utils/cn.mjs";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { Container, Flag } from "@intlayer/design-system";
import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";

//#region src/components/LanguageBackground/index.tsx
const shuffleArray = (array, limit) => {
	const shuffled = [...array];
	for (let i = shuffled.length - 1; i > 0; i--) {
		const randomIndex = Math.floor(Math.random() * (i + 1));
		[shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
	}
	return limit ? shuffled.slice(0, limit) : shuffled;
};
const LocalCard = ({ locale, ...props }) => /* @__PURE__ */ jsx("div", {
	className: "group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105",
	...props,
	children: /* @__PURE__ */ jsxs(Container, {
		roundedSize: "xl",
		className: "flex flex-row items-center gap-5 p-3",
		children: [/* @__PURE__ */ jsx(Flag, {
			locale,
			className: "max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0",
			width: 640,
			height: 480,
			loading: "lazy"
		}), /* @__PURE__ */ jsx("span", {
			dir: getHTMLTextDir(locale),
			lang: locale,
			className: "flex text-nowrap",
			children: getLocaleName(locale)
		})]
	})
});
const LocalCardList = ({ localeList, className, ...props }) => /* @__PURE__ */ jsx("div", {
	className: "relative flex w-full overflow-hidden",
	...props,
	children: /* @__PURE__ */ jsxs("div", {
		className: cn("inline-flex shrink-0 will-change-transform", className),
		children: [localeList.map((locale, index) => /* @__PURE__ */ jsx(LocalCard, { locale }, `${locale}-first-${index}`)), localeList.map((locale, index) => /* @__PURE__ */ jsx(LocalCard, { locale }, `${locale}-second-${index}`))]
	})
});
const NUM_OF_LOCALES = 15;
const emptyArrayOfLocale = new Array(4).fill(0).map(() => []);
const arrayOfLocale = new Array(4).fill(0).map(() => shuffleArray(Object.values(Locales.ALL_LOCALES), NUM_OF_LOCALES));
const LanguageSection = ({ className, ...props }) => {
	const [localeList, setLocaleList] = useState(emptyArrayOfLocale);
	const [firstPart, secondPart, thirdPart, fourthPart] = localeList;
	useEffect(() => {
		setLocaleList(arrayOfLocale);
	}, []);
	return /* @__PURE__ */ jsx("section", {
		className: cn("mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden", className),
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative flex w-full flex-col gap-5 py-3",
			children: [
				/* @__PURE__ */ jsx(LocalCardList, {
					localeList: firstPart,
					className: "horizontal-loop-1"
				}),
				/* @__PURE__ */ jsx(LocalCardList, {
					localeList: secondPart,
					className: "horizontal-loop-2"
				}),
				/* @__PURE__ */ jsx(LocalCardList, {
					localeList: thirdPart,
					className: "horizontal-loop-1"
				}),
				/* @__PURE__ */ jsx(LocalCardList, {
					localeList: fourthPart,
					className: "horizontal-loop-2"
				})
			]
		})
	});
};
const LanguageBackground = ({ children }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
	className: "absolute top-0 left-0 z-0 flex size-full items-center justify-center",
	children: /* @__PURE__ */ jsx(LanguageSection, { className: "mt-[30%]" })
}), children] });

//#endregion
export { LanguageBackground, LanguageSection };
//# sourceMappingURL=index.mjs.map