"use client";
import LineLoader from "@/components/Shared/LineLoader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import clsx from "clsx";
import {
  History,
  LocateFixedIcon,
  MapPin,
  Search,
  Signpost,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";

const ContactPlatform: React.FC = () => {
  const [isLoading, setIsLoading] = useState();
  const trendingItems = [
    {
      title: "Presidential Fall",
      description:
        "Lorem ipsum dolor sit amet consectetur. Nutempor purus ut nullam sit nam.",
      flagUrl: "https://flagcdn.com/ng.svg",
    },
    {
      title: "Presidential Fall",
      description:
        "Lorem ipsum dolor sit amet consectetur. Nutempor purus ut nullam sit nam.",
      flagUrl: "https://flagcdn.com/ng.svg",
    },
    {
      title: "Presidential Fall",
      description:
        "Lorem ipsum dolor sit amet consectetur. Nutempor purus ut nullam sit nam.",
      flagUrl: "https://flagcdn.com/ng.svg",
    },
  ];

  return (
    <div className="bg-white min-h-screen">
      <header className="text-center mt-10">
        <h3 className="">The Government Officials&apos; Contact Platform</h3>
        <div className="mt-6 flex justify-center">
          <div className="relative flex items-center">
            <div className="relative bg-white w-full h-fit space-y-2">
              <Input
                startIcon={<MapPin className="icon text-neutral-700" />}
                placeholder="Location"
                className="w-32 rounded-r-none"
              />
              {["places", "gkkkk", "dfsfsdf", "places", "gkkkk", "dfsfsdf"]
                .length < 0 && (
                <div className="absolute left-0 top-full z-10 w-full">
                  <ScrollArea className="max-h-[calc(55vh-200px)] border rounded bg-white shadow z-10">
                    <div className="divide-y divide max-h-[calc(55vh-200px)] relative">
                      {[
                        "places",
                        "gkkkk",
                        "dfsfsdf",
                        "places",
                        "gkkkk",
                        "dfsfsdf",
                      ].map((place, index) => (
                        <div
                          key={index}
                          role="button"
                          className="w-full hover:bg-primary-50 flex px-3 py-3 items-center"
                        >
                          <span>{place}</span>
                        </div>
                      ))}
                      <div
                        className={clsx(
                          !isLoading && "hidden",
                          "absolute transition bg-white/70 inset-0"
                        )}
                      >
                        <LineLoader />
                      </div>
                    </div>
                    <ScrollBar orientation="vertical" />
                  </ScrollArea>
                </div>
              )}
            </div>

            <div className="relative bg-white w-full h-fit space-y-2">
              <Input
                startIcon={<Search className="icon text-neutral-700" />}
                placeholder="Search"
                className="w-80 rounded-l-none"
              />

              {["places", "gkkkk", "dfsfsdf", "places", "gkkkk", "dfsfsdf"]
                .length < 0 && (
                <div className="absolute left-0 top-full z-10 w-full">
                  <ScrollArea className="max-h-[calc(55vh-200px)] border rounded bg-white shadow z-10">
                    <div className="divide-y divide max-h-[calc(55vh-200px)] relative">
                      {[
                        "places",
                        "gkkkk",
                        "dfsfsdf",
                        "places",
                        "gkkkk",
                        "dfsfsdf",
                      ].map((place, index) => (
                        <div
                          key={index}
                          role="button"
                          className="w-full hover:bg-primary-50 flex px-3 py-3 items-center"
                        >
                          <span>{place}</span>
                        </div>
                      ))}
                      <div
                        className={clsx(
                          !isLoading && "hidden",
                          "absolute transition bg-white/70 inset-0"
                        )}
                      >
                        <LineLoader />
                      </div>
                    </div>
                    <ScrollBar orientation="vertical" />
                  </ScrollArea>
                </div>
              )}
            </div>

            <Button className="ml-2" size={"lg"}>
              Search
            </Button>
          </div>
        </div>
        <div className="mt-4 text-sm text-neutral-700">
          <b>Popular:</b>
          <Link
            href="/contact-platform/w"
            className="ml-2 underline text-primary"
          >
            Tinubu
          </Link>
          ,
          <Link
            href="/contact-platform/w"
            className="ml-2 underline text-primary"
          >
            Shettima
          </Link>
          ,
          <Link
            href="/contact-platform/w"
            className="ml-2 underline text-primary"
          >
            Primary Health Centre Okuru
          </Link>
        </div>
      </header>

      <section className="mt-12 px-5 space-y-4">
        <h4 className="">Trending</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 justify-items-center">
          {trendingItems.map((item, index) => (
            <div
              key={index}
              className="border rounded bg-white shadow-sm-lg overflow-hidden"
            >
              <div className="h-fit flex items-center justify-center">
                <Image
                  src={item.flagUrl}
                  alt={`Flag of Nigeria`}
                  className="h-full w-auto rounded-t-lg object-contain"
                  height={500}
                  width={500}
                />
              </div>
              <div className="p-4">
                <h4 className="">{item.title}</h4>
                <p className="mt-2 text-sm ">{item.description}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

export default ContactPlatform;