import { primaryBtn, secondaryBtn } from "@/common/classes";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export default function SearchBar() {
  const searchMovies = async (formData: FormData) => {
    "use server";

    const movieTitle = formData.get("movieTitle");
    // revalidatePath('/Search')
    redirect(`/Search?s=${movieTitle}`);
  };
  return (
    <form action={searchMovies} className={`md:flex gap-4 m-4 justify-center`}>
      <div className="flex justify-center">
        <input
          data-testid="SearchBar-input"
          className="rounded px-2 mb-2 md:mb-0"
          placeholder="Search by Title"
          name="movieTitle"
        />
      </div>
      <div className="flex gap-4 justify-center">
        <button type="submit" className={primaryBtn}>
          Search
        </button>
        <button type="reset" className={secondaryBtn}>
          Clear
        </button>
      </div>
    </form>
  );
}