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

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

	return (
		<div className="bn-h-full bn-w-full bn-absolute bn-left-0 bn-top-0 bn-bg-layer-1 bn-p-4 bn-z-10 bn-flex bn-flex-col bn-flex-1">
			<div
				className="bn-bg-layer-2 bn-h-[140px] bn-animate-pulse"
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 12) }}
			/>
			<div className="bn-py-[15px] bn-animate-pulse">
				<div className="bn-rounded-full bn-w-[200px] bn-mb-1 bn-h-[22px] bn-bg-layer-2 bn-mx-auto" />
				<div className="bn-rounded-full bn-w-[300px] bn-h-[17px] bn-bg-layer-2 bn-mx-auto" />
			</div>
			<div
				className="bn-bg-layer-2 bn-h-[140px] bn-animate-pulse bn-flex-1"
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 12) }}
			/>
		</div>
	);
};
