import { jsx as o } from "react/jsx-runtime";
import l from "react";
import p from "@mui/material/OutlinedInput";
import r from "@mui/material/InputAdornment";
import d from "@mui/material/IconButton";
import s from "@mui/icons-material/SearchRounded";
import c from "@mui/icons-material/Clear";
const f = ({ placeholder: n, value: t, onChange: e }) => {
  const i = () => {
    e("");
  }, a = l.useMemo(() => t !== "", [t]);
  return /* @__PURE__ */ o(
    p,
    {
      size: "small",
      autoComplete: "off",
      type: "text",
      placeholder: n ?? "Search",
      startAdornment: /* @__PURE__ */ o(r, { position: "start", children: /* @__PURE__ */ o(s, { color: "primary" }) }),
      endAdornment: a ? /* @__PURE__ */ o(r, { position: "end", children: /* @__PURE__ */ o(d, { size: "small", onClick: i, edge: "end", children: /* @__PURE__ */ o(c, { fontSize: "small" }) }) }) : void 0,
      value: t,
      onChange: (m) => {
        e(m.target.value);
      },
      sx: {
        flexBasis: "500px",
        display: "flex",
        boxShadow: "none",
        minWidth: { md: 400, lg: 400, xl: 500 }
      },
      inputProps: {
        autoCorrect: "off",
        autoComplete: "off"
      }
    }
  );
};
f.displayName = "SearchInput";
export {
  f as S
};
