// * Packages
import { SearchIcon } from "lucide-react";
import { router, useForm } from "@inertiajs/react";
// * Components shadcn
import { Button } from "@/components/ui/button";
// * Other
import InputError from "@/front/Components/Base/InputError";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { route } from "ziggy-js";

export default function SearchInput() {
  const { data, setData, processing, errors } = useForm({
    search: "",
  });
  const submit = () => {
    // e.preventDefault();
    router.visit(route("front.search"));
  };
  return (
    <form>
      <InputGroup className="rounded-full">
        <InputGroupInput
          value={data.search}
          onChange={(e) => setData("search", e.target.value)}
          disabled={processing}
          placeholder="Rechercher..."
        />
        <InputGroupAddon align="inline-end">
          <Button
            onClick={submit}
            variant="ghost"
            className="rounded-full w-7 py-0 h-7"
          >
            <SearchIcon />
          </Button>
        </InputGroupAddon>
      </InputGroup>
      <InputError message={errors?.search} />
    </form>
  );
}