export function OverageSettingsSkeleton(): React.JSX.Element {
	return (
		<div className="kiro-account-dashboard-skeleton">
			{/* Overages */}
			<div className="kiro-overage-label">
				<div className="kiro-account-dashboard-row">
					<div
						className="kiro-modal-loading-skeleton-item"
						style={{ height: "var(--font-size-kiro-lg)", width: 100 }}
					/>
					{/* Status */}
					<div className="kiro-overage-status">
						<div
							className="kiro-modal-loading-skeleton-item"
							style={{ height: "var(--font-size-kiro-sm)", width: 50 }}
						/>
						<div className="kiro-modal-loading-skeleton-toggle" />
					</div>
				</div>
				{/* Description */}
				<div
					className="kiro-modal-loading-skeleton-item"
					style={{ height: "var(--font-size-kiro-sm)", width: 200 }}
				/>
			</div>
		</div>
	);
}
