import { Input } from "@/components/ui/input";
import { useRouter } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import React, { useState } from "react";
import { Reveal } from "../Reveal";

const SearchSectionKaltara = () => {
  const [search, setSearch] = useState("");
  const router = useRouter();
  const t = useTranslations("LandingPage");

  return (
    <>
      <Reveal>
        <div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
          {/* Heading */}
          <h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
          <p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>

          {/* Subjudul */}
          <h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>

          {/* Search Bar */}
          <div className="relative mt-4 w-full max-w-sm md:max-w-md">
            <Input type="text" placeholder="Cari liputan disini..." className="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm md:text-base text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-sans" />
            <button className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500">🔍</button>
          </div>
        </div>
      </Reveal>
    </>
  );
};

export default SearchSectionKaltara;