import * as React from "react";
import styles from "./AutoCompleteSearch.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

export interface IAutoCompleteSearchProps {
  onClick: (value: string) => void;
  show: boolean;
  data: string[];
}

export default function AutoCompleteSearch({
  onClick,
  show,
  data,
}: IAutoCompleteSearchProps) {
  return (
    <div className={cx("complete_box", !show ? "hidden" : "")}>
      <div className={cx("complete_list")}>
        {data?.map((item, index) => {
          return (
            <div className={cx("complete_item")} key={index} onClick={() => onClick(item)}>
              <span className={cx("complete_text")}>{item}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
