import { memo } from "react";
import type { ISchemaField } from "@ax/types";

import * as S from "./style";

const SectionOption = (props: IProps) => {
	const { option, handleClick } = props;

	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="section-option">
			Fields for {option.title}
		</S.Item>
	);
};

interface IProps {
	option: ISchemaField;
	handleClick: (option: ISchemaField) => void;
}

export default memo(SectionOption);
