import search from "@/app/[locale]/(protected)/app/chat/components/search";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectItem,
} from "@radix-ui/react-select";
import { Icon } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import router from "next/router";
import React, { useState } from "react";
import ScrollableContent from "./search-section-new";
import NewContent from "./new-content";
import ContentCategory from "./content-category";
import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";

const LeftBanner = () => (
  <div className="sticky top-0 space-y-4 ml-14">
    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
  </div>
);

const RightBanner = () => (
  <div className="sticky top-0 space-y-4">
    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" width={180} />
    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" width={180} />
  </div>
);

const SearchSection = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const router = useRouter();
  const t = useTranslations("LandingPage");
  return (
    <div
      className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
      style={{ backgroundImage: "url('/assets/background.png')" }}
    >
      <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
        <LeftBanner />
      </div>

      <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
        <ScrollableContent />
        <NewContent group="mabes" type="latest" />
        <NewContent group="mabes" type="popular" />
        <ContentCategory group="mabes" type="popular" />
        <AreaCoverageWorkUnits />
        <EventCalender />
        <UserSurveyBox />
      </div>

      <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
        <RightBanner />
      </div>
    </div>
  );
};

export default SearchSection;