import { Stack } from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";

import { SearchIcon } from "@/shared";

import styles from "./SearchBox.module.css";

interface Props {
	onSearch: (searchTerm: string) => void;
	label: string;
	search: string;
}

export const SearchBox: FC<Props> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack
			direction="row"
			spacing="10px"
			className={styles.container}
			onDoubleClick={(e) => e.stopPropagation()}
		>
			<input
				className={styles.input}
				type="text"
				value={props.search}
				onBlur={(x) => props.onSearch(x.target.value)}
				onChange={(x) => props.onSearch(x.target.value)}
				placeholder={t("Search")}
			/>
			<button
				type="submit"
				className={styles.button}
				onDoubleClick={(e) => e.stopPropagation()}
				title={t("Search")}
			>
				<SearchIcon color="black-300" width={24} height={24} />
			</button>
		</Stack>
	);
};
