import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { Link } from "@/i18n/routing";
import Image from "next/image";
import React, { useState } from "react";

const category = [
  {
    id: 1,
    name: "Nasional",
  },
  {
    id: 2,
    name: "Kaltara",
  },
  {
    id: 3,
    name: "Keamanan",
  },
  {
    id: 4,
    name: "Kesehatan",
  },
  {
    id: 5,
    name: "Olahraga",
  },
  {
    id: 6,
    name: "PPA",
  },
  {
    id: 7,
    name: "MediaHub",
  },
];

const categoryLinks: any = {
  Nasional: "/news/nasional",
  Kaltara: "/news/kaltara",
  Keamanan: "/security",
  Kesehatan: "/health",
  Olahraga: "/sports",
  PPA: "/ppa",
  MediaHub: "https://mediahub.polri.go.id/",
};

const NavbarKaltara = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 flex justify-between items-center fixed top-0 z-50">
      <div className="flex flex-row items-center">
        <Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
        <div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
          {category?.map((data: any) => (
            <Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
              {data?.name}
            </Link>
          ))}
        </div>
        <Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
          <Icon icon="material-symbols:lock" className="text-[#c03724]" />
          <p className="text-[#c03724]">Login</p>
        </Button>
      </div>

      {/* Mobile Menu Toggle */}
      <button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
        {menuOpen ? (
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
          </svg>
        ) : (
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
          </svg>
        )}
      </button>

      {/* Mobile Menu */}
      {menuOpen && (
        <div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 top-36 items-center w-[300px]">
          <div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
            {category?.map((data: any) => (
              <Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
                {data?.name}
              </Link>
            ))}
          </div>
          <Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
            <Icon icon="material-symbols:lock" className="text-[#c03724]" />
            <p className="text-[#c03724]">Login</p>
          </Button>
        </div>
      )}
    </div>
  );
};

export default NavbarKaltara;