import { Input } from "@/components/ui/input";
import SearchIconActionList from "@/shared/icons/home-page/searchIconActionList.svg";
import { ChangeEvent, memo } from "react";

type TDashboardSearchInputProps = {
	searchValue: string;
	onChange: (value: string) => void;
	placeholder: string;
};

const DashboardSearchInput = ({
	searchValue,
	onChange,
	placeholder,
}: TDashboardSearchInputProps) => {
	return (
		<div className='flex items-center flex-1 px-5 py-[5px] bg-[#F3F3F3] rounded-[6px] h-9'>
			<SearchIconActionList />
			<Input
				type='text'
				className='p-0 ml-2 border-0 focus-visible:ring-0 focus-visible:ring-transparent h-full'
				value={searchValue}
				onChange={(e: ChangeEvent<HTMLInputElement>) =>
					onChange(e.target.value)
				}
				placeholder={placeholder}
			/>
		</div>
	);
};

export default memo(DashboardSearchInput);