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.5 bn-flex-1 bn-cursor-pointer bn-animate-pulse bn-border bn-border-solid bn-border-transparent bn-rounded-lg bn-flex bn-justify-between bn-items-center bn-h-[66px]";
	return (
		<div
			className={style}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			{/* Left section - Icon and content */}
			<div className="bn-flex bn-items-center bn-space-x-2.5">
				{/* Route icon skeleton */}
				<div className="bn-size-8 bn-rounded-full bn-bg-layer-3" />

				{/* Content section */}
				<div className="bn-flex bn-space-y-1 bn-flex-col">
					{/* Route label skeleton */}
					<div className="bn-h-[17px] bn-rounded-full bn-bg-layer-3 bn-w-[80px]" />

					{/* Amount and time section */}
					<div className="bn-flex bn-items-center bn-justify-center bn-space-x-2">
						{/* Amount skeleton */}
						<div className="bn-h-5 bn-rounded-full bn-bg-layer-3 bn-w-[100px]" />

						{/* Divider skeleton */}
						<div className="bn-w-[1px] bn-h-[10px] bn-bg-layer-3 bn-rounded-full bn-shrink-0" />

						{/* Time skeleton */}
						<div className="bn-h-5 bn-rounded-full bn-bg-layer-3 bn-w-[40px]" />
					</div>
				</div>
			</div>

			{/* Right section - Route type and fees */}
			<div className="bn-flex bn-flex-col bn-items-end bn-space-y-2">
				{/* Route type skeleton */}
				<div className="bn-h-[17px] bn-rounded-full bn-bg-layer-3 bn-w-[50px]" />

				{/* Fees skeleton */}
				<div className="bn-h-4 bn-rounded-full bn-bg-layer-3 bn-w-[60px]" />
			</div>
		</div>
	);
};
