import type { ReactNode } from "react";

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

export const SettingsItem = ({
	label,
	children,
}: {
	label: string | ReactNode;
	children: ReactNode;
}) => {
	const theme = useTheme();

	return (
		<div
			className="bn-flex bn-items-center bn-justify-between bn-text-primary bn-text-base bn-font-medium bn-px-4 bn-py-[14px] bn-mb-4 last:bn-mb-0 bn-bg-layer-2"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			<span>{label}</span>

			{children}
		</div>
	);
};
