/**
 * @component TopBar
 * @purpose Clean top bar matching Screenshot 1 with Track Order, About Us, Blog, Contact Us, FAQs, and Free Shipping notification.
 */
'use client';

import Link from 'next/link';
import { Truck } from 'lucide-react';

export function TopBar() {
  return (
    <div className="w-full bg-white text-[#555555] text-xs py-2 px-4 border-b border-gray-100">
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        {/* Left Nav Links */}
        <div className="flex items-center gap-4 sm:gap-6 font-medium text-[11px]">
          <Link href="/account/orders" className="hover:text-[#1877f2] transition-colors flex items-center gap-1">
            <Truck className="w-3.5 h-3.5 text-[#1877f2]" /> Track Order
          </Link>
          <span className="text-gray-300">|</span>
          <Link href="/about" className="hover:text-[#1877f2] transition-colors">
            About Us
          </Link>
          <span className="text-gray-300">|</span>
          <Link href="/blog" className="hover:text-[#1877f2] transition-colors">
            Blog
          </Link>
          <span className="text-gray-300">|</span>
          <Link href="/contact" className="hover:text-[#1877f2] transition-colors">
            Contact Us
          </Link>
          <span className="text-gray-300">|</span>
          <Link href="/faqs" className="hover:text-[#1877f2] transition-colors">
            FAQs
          </Link>
        </div>

        {/* Right Free Shipping Text */}
        <div className="hidden md:flex items-center gap-1.5 text-[11px] font-semibold text-gray-700">
          <span>Free Shipping on orders over ₹999!</span>
        </div>
      </div>
    </div>
  );
}