import React from "react";
import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { MIcon } from "../common/MIcon";

export const BoosterItem = ({
	label,
	description,
	active,
	setActive,
	icon,
}: {
	label: string;
	description: string;
	active: boolean;
	setActive: (value: boolean) => void;
	icon: string;
}) => {
	return (
		<div className="bn-flex bn-items-center bn-justify-between bn-mt-3 bn-py-1.5">
			<div className="bn-flex bn-items-center">
				{icon ? (
					<img
						src={icon}
						className="bn-size-8 bn-rounded-full bn-mr-2 bn-flex-shrink-0"
						alt="add on icon"
					/>
				) : (
					<div className="bn-w-8 bn-h-8 bn-rounded-full bn-bg-layer-3 bn-mr-2 bn-flex-shrink-0" />
				)}
				<div>
					<p className="bn-text-primary bn-font-medium bn-text-base bn-leading-[19px] bn-mb-0.5">
						{label}
					</p>
					<p className="bn-text-secondary bn-font-normal bn-text-sm bn-leading-[17px]">
						{description}
					</p>
				</div>
			</div>

			<AddButton active={active} setActive={setActive} />
		</div>
	);
};

const AddButton = ({
	active,
	setActive,
}: { active: boolean; setActive: (value: boolean) => void }) => {
	const theme = useTheme();
	if (active) {
		return (
			<button
				type="button"
				className="bn-ml-4 bn-bg-accent bn-text-accent bn-text-sm bn-font-medium bn-px-4 bn-py-2 bn-border-0 bn-cursor-pointer"
				onClick={() => setActive(false)}
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
			>
				Added
			</button>
		);
	}

	return (
		<button
			type="button"
			onClick={() => setActive(true)}
			className="bn-w-8 bn-h-8 bn-rounded-full bn-flex bn-items-center bn-justify-center bn-border-0 bn-bg-layer-2 bn-cursor-pointer bn-text-primary"
		>
			<MIcon name="add" />
		</button>
	);
};
