import React from "react";
import Image from "next/image";
import { TopBarData } from "@/types/navigation";

interface TopBarProps {
  data: TopBarData;
}

export const TopBar: React.FC<TopBarProps> = ({ data }) => {
  return (
    <div className="bg-[#5C7A36] text-white text-xs py-1.5 border-b border-green-700/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-2">
        {/* Left Side: Contact Links (Phone, WhatsApp, Email — matches the live site's order) */}
        <div className="flex items-center flex-wrap gap-4 sm:gap-6 justify-center md:justify-start">
          <a
            href={`tel:${data.phone}`}
            className="inline-flex items-center gap-1.5 hover:text-green-200 transition-colors"
          >
            <Image src="/icons/phone.svg" alt="" width={14} height={14} className="w-3.5 h-3.5" />
            <span>{data.phone}</span>
          </a>

          <a
            href={data.whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 font-medium hover:text-emerald-200 transition-colors group"
            aria-label="WhatsApp Contact"
          >
            <span className="flex h-5 w-5 items-center justify-center group-hover:scale-110 transition-transform">
              <Image src="/icons/whatsapp.svg" alt="" width={20} height={20} className="w-5 h-5" />
            </span>
            <span className="font-semibold tracking-tight">{data.whatsappNumber}</span>
          </a>

          <a
            href={`mailto:${data.email}`}
            className="hidden sm:inline-flex items-center gap-1.5 hover:text-green-200 transition-colors"
          >
            <Image src="/icons/mail.svg" alt="" width={16} height={13} className="w-4 h-[13px]" />
            <span>{data.email}</span>
          </a>
        </div>

        {/* Right Side: Announcement Banner */}
        <div className="flex items-center gap-2 text-xs justify-center md:justify-end">
          <span className="bg-red-600 text-white font-extrabold text-[10px] px-2 py-0.5 rounded uppercase tracking-wide">
            {data.announcement.discountBadge}
          </span>
          <a href={data.announcement.ctaHref} className="font-bold hover:text-amber-300 transition-colors">
            {data.announcement.ctaText}
          </a>
          <span className="hidden sm:inline font-medium text-green-100">{data.announcement.text}</span>
        </div>
      </div>
    </div>
  );
};