import React, { FC } from "react";

//controls
import {
  OutlinedInput,
  InputAdornment,
} from "@mui/material";

import "./styles.scss";
import { Icons, Label } from "..";
import { Types } from "./types";

export const SearchInput:FC<Types> = ({
  id,
  label,
  searchText,
  onSearchText,
  placeholder,
  isDisabled,
  size = "medium",
}) => {
  return (
    <div className="cloud-input-search" style={{ width: "100%" }}>
      {label && <Label>{label}</Label>}

      <OutlinedInput
        id={id || "custom-search"}
        placeholder={placeholder}
        type={"text"}
        value={searchText || ""}
        size={size}
        fullWidth={true}
        onChange={(event) => {
          onSearchText && onSearchText(event.target.value);
        }}
        disabled={isDisabled}
        endAdornment={
          <InputAdornment position="end">
            <Icons
              style={{ fontSize: 25, color: "black" }}
              size="large"
              name="search"
            />
          </InputAdornment>
        }
      />
    </div>
  );
};
