import Box from "@mui/material/Box";
import { Logo } from "./Logo/Logo";
import { SearchTextBox } from "./SearchTextBox/SearchTextBox";
import { SearchButton } from "./SearchButton/SearchButton";

export function SearchRow() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: "1em",
      }}
    >
      <Box sx={{ flexGrow: 0, width: "5em" }}>
        <Logo />
      </Box>
      <Box sx={{ flexGrow: 1 }}>
        <SearchTextBox />
      </Box>
      <Box sx={{ flexGrow: 0 }}>
        <SearchButton />
      </Box>
    </Box>
  );
}