import { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";

const NETWORK_SKELETON_IDS = [
	"network-skeleton-0",
	"network-skeleton-1",
	"network-skeleton-2",
	"network-skeleton-3",
	"network-skeleton-4",
	"network-skeleton-5",
	"network-skeleton-6",
] as const;

export const NetworkListSkeleton = ({
	showAllNetworksBtn = false,
}: {
	showAllNetworksBtn?: boolean;
}) => {
	const theme = useTheme();

	return (
		<div className="bn-mt-[15px] bn-space-y-1.5 bn-mb-4">
			<div className="bn-flex bn-px-4 bn-relative bn-space-x-1.5">
				{showAllNetworksBtn && (
					<div className="bn-w-fit">
						<div
							className="bn-border bn-border-solid bn-whitespace-nowrap bn-flex bn-items-center bn-px-4 bn-h-[38px] bn-w-[81px] bn-animate-pulse bn-bg-layer-2 bn-border-transparent"
							style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
						>
							<div className="bn-h-[18px] bn-w-[50px] bn-rounded-full bn-bg-layer-3" />
						</div>
					</div>
				)}
				{NETWORK_SKELETON_IDS.map((id) => (
					<div
						key={id}
						className="bn-w-[37px] bn-h-[37px] bn-flex bn-items-center bn-justify-center bn-shrink-0 bn-border bn-border-solid bn-border-transparent bn-bg-layer-2 bn-animate-pulse"
						style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
					>
						<div className="bn-w-[22px] bn-h-[22px] bn-rounded-full bn-bg-layer-3" />
					</div>
				))}
			</div>
		</div>
	);
};
