import { MIcon } from "../../MIcon";

export interface Tag {
	label: string;
	iconName: string;
}

export const tagsInfo: Record<string, Tag> = {
	best: {
		label: "Best Price",
		iconName: "paid",
	},
	fast: {
		label: "Fastest",
		iconName: "offline_bolt",
	},
};

export const RouteTag = ({
	item,
	isActive,
}: { item: Tag; isActive: boolean }) => {
	// biome-ignore format:
	const style = `${isActive ? 'bn-text-accent' : 'bn-text-secondary'} bn-flex bn-items-center`

	return (
		<div className={style}>
			<MIcon name={item.iconName} classNames="bn-text-lg" />
			<span className="bn-text-sm bn-pl-1 bn-uppercase bn-font-medium">
				{item.label}
			</span>
		</div>
	);
};
