import SearchD from "@/components/icons/SearchD";
import { Button, ButtonGroup } from "@mui/material";
import { useState } from "react";
import AutoCompleteSearch from "./AutoCompleteSearch";

function SmSearch({ placeholder, handleSearch, data }) {
  const [inputValue, setInputValue] = useState("");
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <ButtonGroup
      variant="contained"
      className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
        !h-fit !p-1"
    >
      <AutoCompleteSearch
        data={data}
        inputValue={inputValue}
        placeholder={placeholder}
        handleSearch={handleSearch}
        setInputValue={setInputValue}
        setSelectedOption={setSelectedOption}
      />
      <Button
        onClick={() => handleSearch(inputValue)}
        className="
          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
        "
      >
        <SearchD />
      </Button>
    </ButtonGroup>
  );
}

export default SmSearch;