import React, { useState } from 'react';
import { FiSearch } from "react-icons/fi"; // Importing search icon from react-icons
import "../../Components/SearchInput/PozoPublicSearchInput.scss";

const PozoPublicSearchInput = ({
    label = "Search",
    placeholder = "Search...",
    value = "",
    onChange,
    width = "100%",
    height = "auto",
    searchIcon = <FiSearch />, // Default search icon using React Icons
    disabled = false,
    className = ""
}) => {
    const [inputValue, setInputValue] = useState(value);

    const handleInputChange = (e) => {
        setInputValue(e.target.value);
        if (onChange) onChange(e.target.value); // Call onChange from parent
    };

    return (
        <div
            className={`PozoPublicSearchInput ${className}`}
            style={{ width: width, height: height }}
        >
            <div className="PozoPublicSearchInput-main" style={{ width: '100%' }}>
                <span className="PozoPublicSearchInput-icon">
                    {searchIcon}
                </span>
                <input
                    type="text"
                    placeholder={placeholder}
                    value={inputValue}
                    onChange={handleInputChange}
                    disabled={disabled}
                    className="PozoPublicSearchInput-input"
                />
            </div>
        </div>
    );
}

export default PozoPublicSearchInput;