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

export const HistoryItemSkeleton = () => {
	const theme = useTheme();

	return (
		<div
			className="bn-w-full bn-bg-layer-2 bn-border-0 bn-p-4 bn-cursor-pointer bn-space-y-2.5 bn-animate-pulse"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			{/* Token details row - matches TokenDetails structure */}
			<div className="bn-flex bn-items-center bn-justify-between">
				{/* Source token skeleton - matches TokenDetails with showTokens */}
				<div className="bn-flex bn-items-center bn-justify-start bn-space-x-2.5">
					{/* Token icon with network icon overlay */}
					<div className="bn-size-7 bn-rounded-full bn-relative">
						<div className="bn-size-full bn-bg-layer-3 bn-rounded-full" />
						<div className="bn-size-4 bn-absolute -bn-right-1 -bn-bottom-0.5 bn-bg-layer-3 bn-rounded-full" />
					</div>
					{/* Token details text */}
					<div className="bn-flex bn-flex-col bn-items-start">
						{/* "From [Chain]" label */}
						<div className="bn-h-3 bn-w-20 bn-bg-layer-3 bn-rounded bn-mb-1" />
						{/* Amount and symbol */}
						<div className="bn-flex bn-space-x-1">
							<div className="bn-h-4 bn-w-12 bn-bg-layer-3 bn-rounded" />
							<div className="bn-h-4 bn-w-8 bn-bg-layer-3 bn-rounded" />
						</div>
					</div>
				</div>

				{/* Destination token skeleton - RTL version */}
				<div className="bn-flex bn-items-center bn-flex-row-reverse bn-space-x-reverse bn-space-x-2.5">
					{/* Token icon with network icon overlay */}
					<div className="bn-size-7 bn-rounded-full bn-relative">
						<div className="bn-size-full bn-bg-layer-3 bn-rounded-full" />
						<div className="bn-size-4 bn-absolute -bn-right-1 -bn-bottom-0.5 bn-bg-layer-3 bn-rounded-full" />
					</div>
					{/* Token details text */}
					<div className="bn-flex bn-flex-col bn-items-end">
						{/* "To [Chain]" label */}
						<div className="bn-h-3 bn-w-16 bn-bg-layer-3 bn-rounded bn-mb-1" />
						{/* Amount and symbol */}
						<div className="bn-flex bn-space-x-1">
							<div className="bn-h-4 bn-w-12 bn-bg-layer-3 bn-rounded" />
							<div className="bn-h-4 bn-w-8 bn-bg-layer-3 bn-rounded" />
						</div>
					</div>
				</div>
			</div>

			{/* Bottom section with order ID and status */}
			<div className="bn-flex bn-items-center bn-justify-between bn-border-0 bn-border-t bn-border-solid bn-border-subtle bn-pt-2.5">
				{/* Order ID skeleton - matches OrderId structure */}
				<div>
					{/* "Request Hash:" label */}
					<div className="bn-h-3 bn-w-20 bn-bg-layer-3 bn-rounded bn-mb-1.5" />
					{/* Hash value with icon */}
					<div className="bn-flex bn-items-center bn-space-x-1">
						<div className="bn-h-4 bn-w-4 bn-bg-layer-3 bn-rounded" />
						<div className="bn-h-4 bn-w-24 bn-bg-layer-3 bn-rounded" />
					</div>
				</div>

				{/* Date and status skeleton */}
				<div className="bn-flex bn-flex-col bn-items-end">
					{/* Date skeleton */}
					<div className="bn-h-3 bn-w-24 bn-bg-layer-3 bn-rounded bn-mb-1" />
					{/* Status skeleton */}
					<div className="bn-flex bn-items-center bn-space-x-1">
						<div className="bn-h-4 bn-w-4 bn-bg-layer-3 bn-rounded-full" />
						<div className="bn-h-4 bn-w-16 bn-bg-layer-3 bn-rounded" />
					</div>
				</div>
			</div>
		</div>
	);
};
