import { memo } from "react";

import { filterImageText, getDisplayName, getThumbnailProps } from "@ax/helpers";

import * as S from "./style";

const getThumbnailData = (option: string, theme: string) => {
	const optionText = filterImageText(option);
	if (!optionText) return false;
	return getThumbnailProps(optionText, false, theme);
};

const SideModalOption = (props: IProps) => {
	const { option, handleClick, theme } = props;
	const thumbnailProps = getThumbnailData(option, theme);
	const label = getDisplayName(option);

	const setOption = () => handleClick(option);

	const handleKeyDown = (e: React.KeyboardEvent) => {
		if (e.key === "Enter") {
			setOption();
		}
	};

	return (
		<S.Item onClick={setOption} onKeyDown={handleKeyDown} tabIndex={0} data-testid="side-modal-option">
			{thumbnailProps && <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />}
			{label}
		</S.Item>
	);
};

interface IProps {
	option: string;
	handleClick: (option: string) => void;
	children: string;
	theme: string;
}

export default memo(SideModalOption);
