import React from "react";
import { TextInput } from "@mantine/core";
import SearchIcon from "@mui/icons-material/Search";
import { useTranslation } from "react-i18next";
import { useFileManagerContext } from "@app/contexts/FileManagerContext";

interface SearchInputProps {
  style?: React.CSSProperties;
}

const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
  const { t } = useTranslation();
  const { searchTerm, onSearchChange } = useFileManagerContext();

  return (
    <TextInput
      placeholder={t("fileManager.searchFiles", "Search files...")}
      leftSection={<SearchIcon />}
      value={searchTerm}
      onChange={(e) => onSearchChange(e.target.value)}
      style={{ padding: "0.5rem", ...style }}
      styles={{
        input: {
          border: "none",
          backgroundColor: "transparent",
        },
      }}
    />
  );
};

export default SearchInput;
