import { Phone, Mail, MapPin } from 'lucide-react';

interface UpperNavbarProps {
  contact?: {
    phone?: string;
    email?: string;
    address?: string;
  };
  socialLinks?: { label: string; href: string }[];
}

export default function UpperNavbar({ contact, socialLinks }: UpperNavbarProps) {
  return (
    <div className="bg-gray-900 text-white text-sm">
      <div className="container mx-auto px-4 py-2">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-6">
            {contact?.phone && (
              <a href={`tel:${contact.phone}`} className="flex items-center gap-1 hover:text-blue-300">
                <Phone className="w-4 h-4" />
                {contact.phone}
              </a>
            )}
            {contact?.email && (
              <a href={`mailto:${contact.email}`} className="flex items-center gap-1 hover:text-blue-300">
                <Mail className="w-4 h-4" />
                {contact.email}
              </a>
            )}
          </div>
          
          <div className="flex items-center gap-4">
            {socialLinks?.map(link => (
              <a
                key={link.label}
                href={link.href}
                className="hover:text-blue-300"
                target="_blank"
                rel="noopener"
              >
                {link.label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}