import { Button, TextField, Tooltip } from "@mui/material";
import axios from "axios";
import { RiFileExcel2Fill, RiSearchLine } from "react-icons/ri";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";

export const TradePanelSearchBar = ({
  textValue,
  onTextChange,
  onSubmit,
  excelUrlParams,
}) => {
  return (
    <Grid xs={12}>
      <form onSubmit={onSubmit}>
        <Grid container alignItems="center" gap={SPACING.SMALL} p={2}>
          <TextField
            size="small"
            autoComplete="off"
            label="جستجو"
            variant="outlined"
            style={{ width: 250 }}
            value={textValue}
            onChange={onTextChange}
          />

          <Button type="submit" onClick={onSubmit} endIcon={<RiSearchLine />}>
            جستجو
          </Button>

          <Tooltip title="خروجی اکسل">
            <a
              href={`${axios.defaults.baseURL}direct_buying_poultry_requests/?${excelUrlParams}`}
              rel="noreferrer"
            >
              <Button color="success">
                <RiFileExcel2Fill size={32} />
              </Button>
            </a>
          </Tooltip>
        </Grid>
      </form>
    </Grid>
  );
};
