import { MIcon } from "@components/common/MIcon";
import type { ReactElement } from "react";

const AddOnContent = ({ iconName, label, actionItem, active }: { iconName: string; label: string; actionItem: ReactElement, active: boolean }) => (
	<>
		<MIcon name={iconName} classNames={`bn-text-[20px] ${active ? 'bn-text-accent' : 'bn-text-secondary'}`} />
		<span>{label}</span>
		{actionItem}
	</>
);

export const AddOnItem = ({
	label,
	iconName,
	actionItem,
    active,
	onClick,
	disabled = false
}: { 
	label: string; 
	iconName: string; 
	actionItem: ReactElement;
    active: boolean;
	onClick?: () => void;
	disabled?: boolean;
}) => {
	const className = `bn-flex bn-items-center bn-space-x-1 bn-p-1 bn-bg-layer-3 bn-text-primary bn-text-sm bn-font-medium bn-rounded-full ${disabled ? "bn-opacity-60" : "bn-opacity-100"}`;
	
	if (onClick) {
		return (
			<button 
				className={className}
				onClick={onClick}
				type="button"
			>
				<AddOnContent iconName={iconName} label={label} actionItem={actionItem} active={active} />
			</button>
		);
	}

	return (
		<div className={className}>
			<AddOnContent iconName={iconName} label={label} actionItem={actionItem} active={active}/>
		</div>
	);
};
