import React from "react";

import * as S from "./style";

import { Icon, Tooltip } from "@ax/components";

const HiddenField = ({ title, showField, disabled, hasMultipleOptions = false }: IHiddenFieldProps): JSX.Element => {
	return hasMultipleOptions ? (
		<S.WrapperMultipleOptions onClick={showField} data-testid="field-multiple-options" disabled={disabled}>
			<div>
				<Icon name="add" />
			</div>
		</S.WrapperMultipleOptions>
	) : (
		<S.Wrapper onClick={showField} data-testid="field-single-option" disabled={disabled}>
			<S.Label>{title}</S.Label>
			<Tooltip content="Show">
				<Icon name="add" />
			</Tooltip>
		</S.Wrapper>
	);
};

export interface IHiddenFieldProps {
	title: string;
	showField(): void;
	hasMultipleOptions?: boolean;
	disabled?: boolean;
}

export default HiddenField;
