import InputBase from "@mui/material/InputBase";
import Search from "@mui/icons-material/Search";

export function SearchBox({ autoFocus = false, className = "", label = "搜索", onChange, placeholder, value }) {
  const hasValue = value !== undefined && value !== null && String(value).length > 0;

  return (
    <label className={["search-box", hasValue ? "search-box--active" : "", className].filter(Boolean).join(" ")}>
      <span className="search-box__label">
        <Search fontSize="inherit" />
        <span>{label}</span>
      </span>
      <InputBase
        autoFocus={autoFocus}
        value={value}
        onChange={(event) => onChange(event.currentTarget.value)}
        placeholder={placeholder}
        type="search"
        sx={{ color: "var(--text-primary)", flex: 1, fontSize: "var(--admin-font-size)" }}
      />
    </label>
  );
}
