import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { Link } from "@/i18n/routing";
import Image from "next/image";
import React 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: "/mediahub",
};

const NavbarKaltara = () => {
  return (
    <div className="bg-[#c03724] py-4 px-4 lg:px-20 flex justify-between items-center">
      <div className="flex flex-row items-center">
        <Image width={2560} height={1440} src="/assets/img/logo-tbnews-kaltara.png" alt="image" className="h-28 w-72" />
        <div className="text-white font-semibold 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="flex justify-center items-center bg-white rounded-lg gap-3 ml-7 p-3 h-fit">
          <Icon icon="material-symbols:lock" className="text-[#c03724]" />
          <p className="text-[#c03724]">Login</p>
        </Button>
      </div>
    </div>
  );
};

export default NavbarKaltara;