import { useEffect } from "react";

import { ElementsTooltip } from "@ax/components";

import * as S from "./style";

const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
	const { categories, categoryColors, addCategoryColors } = props;

	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
	useEffect(() => {
		addCategoryColors(categories);
	}, [categories]);

	return (
		<S.CategoryCell>
			<ElementsTooltip elements={categories} colors={categoryColors} maxChar={30} rounded={true} />
		</S.CategoryCell>
	);
};

export interface ICategoryCellProps {
	categories: string[];
	categoryColors: any;
	addCategoryColors(cats: string[]): void;
}

export default CategoryCell;
