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

export const RouteItemSkeleton = () => {
	const theme = useTheme();
	const style =
		"bn-bg-layer-2 bn-px-4 bn-py-2 bn-flex-1 bn-cursor-pointer bn-animate-pulse bn-border bn-border-solid bn-border-transparent";
	return (
		<div
			className={style}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			<div className="bn-h-5 bn-rounded-full bn-w-[70px] bn-bg-layer-3" />

			<div className="bn-mt-3 bn-space-y-2">
				<div className="bn-space-y-1">
					<div className="bn-h-[18px] bn-rounded-full bn-bg-layer-3 bn-w-full" />
					<div className="bn-h-[14px] bn-rounded-full bn-bg-layer-2 bn-w-[60px]" />
				</div>

				<div className="bn-h-5 bn-w-full bn-rounded-full bn-bg-layer-3" />
			</div>
		</div>
	);
};
