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

export const WarnBar = ({
	title,
	subtitle,
	subtitleLink,
	subtitleLinkText,
	icon,
	classNames,
	isImage = false,
	iconClassName = "",
}: {
	title: string;
	subtitle: string;
	subtitleLink?: string;
	subtitleLinkText?: string;
	icon: string;
	classNames?: string;
	isImage?: boolean;
	iconClassName?: 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">
				{isImage ? (
					<img
						src={icon}
						alt=""
						className={twMerge("bn-size-5", iconClassName)}
					/>
				) : (
					<MIcon name={icon} classNames="bn-text-lg 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 bn-flex bn-items-center bn-gap-1">
					{subtitle}{" "}
					{subtitleLinkText && subtitleLink && (
						<a
							href={subtitleLink}
							target="_blank"
							rel="noreferrer"
							className="bn-flex bn-items-center bn-space-x-1 bn-max-w-max"
						>
							<span className="bn-underline">{subtitleLinkText}</span>
							<MIcon name="open_in_new" classNames="bn-text-xs" />
						</a>
					)}
				</p>
			</div>
		</div>
	);
};
