"use client";
import { useState } from "react";
import { Search, ShoppingCart, Lock } from "lucide-react";
import Link from "next/link";

export default function Navbar() {
  const [date] = useState(() => {
    const now = new Date();
    return new Intl.DateTimeFormat("id-ID", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    }).format(now);
  });

  return (
    <header className="w-full border-b border-gray-200">
      {/* Topbar */}
      <div className="flex justify-between items-center bg-teal-400 text-white text-sm px-6 py-2">
        <span>{date}</span>
        <div className="flex space-x-4 items-center">
          <Link href="/shop">Shop</Link>
          <Link href="/account">My Account</Link>
          <Link href="/contact">Contact Us</Link>
          <Link href="/auth" className="flex items-center gap-1">
            <Lock size={14} /> Login
          </Link>
        </div>
      </div>

      {/* Main Navbar */}
      <div className="flex items-center justify-between px-6 py-4 bg-white">
        {/* Logo */}
        <Link href="/" className="text-2xl font-bold">
          <span className="text-gray-900">travel</span>
          <span className="text-teal-400">news</span>
        </Link>

        {/* Menu */}
        <nav className="hidden md:flex space-x-6 font-semibold text-sm">
          <Link href="/" className="hover:text-teal-400">
            HOME
          </Link>
          <Link href="/travel-news" className="hover:text-teal-400">
            TRAVEL NEWS
          </Link>
          <Link href="/destination" className="hover:text-teal-400">
            DESTINATION
          </Link>
          <Link href="/travel-ideas" className="hover:text-teal-400">
            TRAVEL IDEAS
          </Link>
          <Link href="/food-drink" className="hover:text-teal-400">
            FOOD & DRINK
          </Link>
          <Link href="/video" className="hover:text-teal-400">
            VIDEO
          </Link>
        </nav>

        {/* Icons */}
        <div className="flex items-center space-x-4">
          <button aria-label="Search">
            <Search size={20} className="text-gray-700" />
          </button>
          <button aria-label="Cart">
            <ShoppingCart size={20} className="text-gray-700" />
          </button>
        </div>
      </div>
    </header>
  );
}