import { motion } from "framer-motion";
import React, { type ReactNode } from "react";

export const ReviewItem = ({
	label,
	children,
	isLoading = false,
}: {
	label: string;
	children: ReactNode;
	isLoading?: boolean;
}) => {
	return (
		<motion.div
			layout
			className="bn-flex bn-items-center bn-justify-between bn-text-sm bn-text-secondary bn-mb-5 last:bn-mb-0"
		>
			<span>{label}</span>
			<div className="bn-w-fit bn-relative">
				{children}
				{isLoading && <Loader />}
			</div>
		</motion.div>
	);
};

const Loader = () => {
	return (
		<div className="bn-bg-layer-2 bn-absolute bn-inset-0 bn-rounded bn-overflow-hidden">
			<div className="bn-bg-layer-3 bn-animate-pulse bn-h-full bn-w-full" />
		</div>
	);
};
