import { useState } from "react";
import IconSearch from "../components/Icon/IconSearch";
import IconRefresh from "../components/Icon/IconRefresh";

interface Props {
    placeholder?: string;
    onSearch?: (value: string) => void;
    onRefresh?: () => void;
}

const SearchBar = ({
    placeholder = "Search...",
    onSearch,
    onRefresh,
}: Props) => {
    const [value, setValue] = useState("");
    const [focused, setFocused] = useState(false);

    const showRefresh = focused || value.length > 0;

    return (
        <div className="relative w-full max-w-full">
            {/* Search Icon */}
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                <IconSearch />
            </span>

            {/* Input */}
            <input
                type="text"
                value={value}
                placeholder={placeholder}
                className="w-full pl-10 pr-10 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-gray-100"
                onFocus={() => setFocused(true)}
                onBlur={() => setFocused(false)}
                onChange={(e) => {
                    setValue(e.target.value);
                    onSearch?.(e.target.value);
                }}
            />

            {/* Refresh Icon */}
            {showRefresh && (
                <span
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-danger cursor-pointer"
                    onMouseDown={(e) => e.preventDefault()} // prevent blur
                    onClick={() => {
                        setValue("");
                        onRefresh?.();
                    }}
                >
                    <IconRefresh />
                </span>
            )}
        </div>
    );
};

export default SearchBar;