import type { Token } from "../../Providers/ConfigProvider";

const Tags = {
	circle: "Issued by circle",
};

export const TokenTags = ({ token }: { token: Token }) => {
	const tags = token?.tags;
	if (!tags) return null;

	return tags.map((tag) => {
		return (
			<Tag key={tag} variant={tag === "imported" ? "secondary" : "primary"}>
				{tag?.toLowerCase() === "circle" ? Tags.circle : tag}
			</Tag>
		);
	});
};

const Tag = ({
	children,
	variant = "primary",
}: { children: string; variant?: "primary" | "secondary" }) => {
	// biome-ignore format:
	const baseStyle = `
        bn-text-xs bn-leading-[14.4px] bn-rounded-full bn-px-2  
        bn-font-medium bn-capitalize bn-ml-1 bn-h-[19.2px]
		bn-leading-[17.2px]
    `;

	//  biome-ignore format:
	const style = `${baseStyle} 
        ${variant === "primary" ? "bn-text-primary bn-bg-layer-2 bn-border bn-border-primary bn-border-solid" : ""} 
        ${variant === "secondary" ? "bn-text-accent2 bn-bg-accent2" : ""}
    `;

	return <span className={style}>{children}</span>;
};
