import { twMerge } from "@utils/tailwindMerge";
import { MIcon } from "./MIcon";

export const WarnBar = ({
	title,
	subtitle,
	icon,
	classNames,
}: { title: string; subtitle: string; icon: string; classNames?: string }) => {
	const style = twMerge(
		"bn-flex bn-items-center bn-bg-accent-1 bn-px-4 bn-py-2",
		classNames,
	);

	return (
		<div className={style}>
			<div className="bn-size-7 bn-rounded-full bn-mr-2 bn-flex bn-items-center bn-justify-center bn-bg-theme/10 bn-flex-shrink-0">
				<MIcon name={icon} classNames="bn-text-xl bn-text-accent-1" />
			</div>
			<div>
				<p className="bn-text-accent-1 bn-text-[13px] bn-font-medium">{title}</p>
				<p className="bn-text-primary bn-text-[13px] bn-font-normal">{subtitle}</p>
			</div>
		</div>
	);
};
