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

import * as S from "./style";

const FormUseItem = (props: IFormUseItem): JSX.Element => {
	const { isSiteView, title, subtitle, structuredDataTitle, categoryColors, availableSiteNames, goToItem } = props;

	return (
		<S.Item data-testid="form-use-item">
			<S.PageInfo>
				<S.Title>{title}</S.Title>
				<S.SubTitle>{subtitle}</S.SubTitle>
			</S.PageInfo>
			<S.Type>
				{structuredDataTitle && (
					<ElementsTooltip elements={[structuredDataTitle]} colors={categoryColors} maxChar={30} rounded={true} />
				)}
			</S.Type>
			{!isSiteView && (
				<S.SiteInfo>
					<ElementsTooltip elements={availableSiteNames} defaultColor="#E8E8EC" elementsPerRow={1} maxChar={30} />
				</S.SiteInfo>
			)}
			<S.Action>
				<IconAction icon="openOutside" onClick={() => goToItem()} />
			</S.Action>
		</S.Item>
	);
};

interface IFormUseItem {
	title: string;
	subtitle: string;
	isSiteView: boolean;
	structuredDataTitle?: string;
	categoryColors?: Record<string, string>;
	availableSiteNames: string[];
	goToItem(): void;
}

export default FormUseItem;
