import React, { useState } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useRouter } from "@/i18n/routing";
import { useTranslations } from "next-intl";

const SearchSection = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const router = useRouter();
  const t = useTranslations("LandingPage");

  return (
    <section className="w-full py-8 px-4 ">
      <div className="max-w-screen-xl mx-auto text-center">
        {/* Heading */}
        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
          <span className="text-[#bb3523] dark:text-white">{t("exploration")}</span> {t("and")} <span className="text-[#bb3523] dark:text-white">{t("download")}</span> {t("coverage")}{" "}
        </h1>
        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
        <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">{t("officialCoverage")}</p>

        {/* Search Form */}
        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
          {/* Dropdown */}
          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
            <Select value={contentType} onValueChange={setContentType}>
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{t("allContent")}</SelectItem>
                  <SelectItem value="image">{t("image")}</SelectItem>
                  <SelectItem value="video">{t("video")}</SelectItem>
                  <SelectItem value="document">{t("text")}</SelectItem>
                  <SelectItem value="audio">{t("audio")}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
              <span className="material-icons text-black dark:text-white px-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                  />
                </svg>
              </span>
              <input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
            </div>
          </div>

          {/* Search Input */}
          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
            {t("searchCoverage")}
            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
          </button>
        </div>
      </div>
    </section>
  );
};

export default SearchSection;