import { Clock, Facebook, Mail, Phone } from "lucide-react";
import { useLocale } from "@/i18n/LocaleContext";
import { siteSettings } from "@/content/site-settings";
import { UI } from "@/i18n/translations";
import { LanguageToggle } from "./LanguageToggle";

export function TopBar() {
  const { t } = useLocale();
  const phone = siteSettings.contact.phone;
  const email = siteSettings.contact.email;
  const fb = siteSettings.social.facebook;

  return (
    <div className="bg-bar text-bar-foreground">
      <div className="container flex flex-wrap items-center justify-between gap-y-2 py-2 text-xs sm:text-sm">
        <div className="flex flex-wrap items-center gap-x-5 gap-y-1.5">
          <a href={`tel:${phone.replace(/[^0-9+]/g, "")}`} className="inline-flex items-center gap-2 hover:text-accent transition-colors">
            <Phone className="h-3.5 w-3.5" aria-hidden />
            <span className="underline-offset-4 hover:underline">{phone}</span>
          </a>
          <a href={`mailto:${email}`} className="hidden md:inline-flex items-center gap-2 hover:text-accent transition-colors">
            <Mail className="h-3.5 w-3.5" aria-hidden />
            <span className="underline-offset-4 hover:underline">{email}</span>
          </a>
          <span className="hidden lg:inline-flex items-center gap-2 text-bar-muted-foreground">
            <Clock className="h-3.5 w-3.5" aria-hidden />
            {t(UI.topbar.hours)}
          </span>
        </div>

        <div className="flex items-center gap-4">
          <LanguageToggle />
          {fb && (
            <a
              href={fb}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Facebook"
              className="inline-flex h-7 w-7 items-center justify-center rounded-sm bg-[hsl(220_85%_45%)] text-white hover:opacity-90 transition-opacity"
            >
              <Facebook className="h-4 w-4" aria-hidden />
            </a>
          )}
        </div>
      </div>
    </div>
  );
}