import { InputGroup } from "../../src/components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import { ChangeEvent } from "react";
import { Input } from "@chakra-ui/react";

interface SearchComponentProps {
    placeholder?: string;
    value: string;
    onChange: (value: string) => void;
}

const SearchComponent = ({ placeholder = "Search...", value, onChange }: SearchComponentProps) => {
    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        onChange(e.target.value);
    };

    return (
        <InputGroup
            startElement={<LuSearch fontSize="xs" style={{ position: 'relative', left: '10px' }} />}
        >
            <>
                {/* <InputLeftElement pointerEvents="none" position="relative" left="10px">
                    <LuSearch fontSize="xs" />
                </InputLeftElement> */}
                <Input
                    p={3}
                    w={300}
                    bg={"#fff"}
                    colorPalette={"blue"}
                    _focus={{ border: "1px solid #02A0A0" }}
                    rounded={"md"}
                    size={"xs"}
                    fontSize={"2sm"}
                    placeholder={placeholder}
                    bgColor={'#EEEEEE'}
                    ps={8}
                    value={value}
                    onChange={handleChange}
                />
            </>
        </InputGroup>
    );
};

export default SearchComponent;