import { ComponentType, Fragment } from "react";

import { Icon } from "@/shared";

import { IconButton } from "../IconButton/ui/IconButton";

import styles from "./ButtonGroup.module.css";

export interface ButtonGroupItem {
	titleKey: string;
	onClick: () => void;
	Icon: ComponentType<Icon>;
	color?: string;
}

interface Props {
	items: ButtonGroupItem[];
	activeIndex?: number;
}

export function ButtonGroup(props: Props) {
	if (props.items.length === 0) {
		return null;
	}

	function getColor(index: number) {
		if (index === props.activeIndex) {
			return "var(--primary-600)";
		}

		return "var(--black-300)";
	}

	function getHoverColor(index: number) {
		if (index === props.activeIndex) {
			return "var(--primary-800)";
		}

		return "var(--black-500)";
	}

	return (
		<div className={styles.container}>
			<IconButton
				{...props.items[0]}
				color={getColor(0)}
				key={props.items[0].titleKey}
				hoverColor={getHoverColor(0)}
			/>

			{props.items.slice(1).map((x, index) => (
				<Fragment key={x.titleKey}>
					<div className={styles.divider} />

					<IconButton
						{...x}
						color={getColor(index + 1)}
						key={x.titleKey}
						hoverColor={getHoverColor(index + 1)}
					/>
				</Fragment>
			))}
		</div>
	);
}
