import React, { type ReactNode } from "react";
import { MIcon } from "../common/MIcon";

export const SettingsItem = ({
	label,
	icon,
	children,
}: { label: string; icon?: string; children: ReactNode }) => {
	return (
		<div className="bn-flex bn-items-center bn-justify-between bn-text-primary bn-text-base bn-font-medium bn-h-9 bn-mb-4 last:bn-mb-0">
			<div className="bn-flex bn-items-center">
				{icon?.length && (
					<div className="bn-mr-2 bn-flex-shrink-0 bn-w-fit bn-h-fit bn-flex bn-text-secondary">
						<MIcon name={icon} />
					</div>
				)}
				<span>{label}</span>
			</div>
			{children}
		</div>
	);
};
