import { Phone, Send } from "lucide-react";
import { Container } from "@/components/Container";
import { phones, site } from "@/lib/data";

export function TopBar() {
  const primary = phones[0];
  const landline = phones[2];

  return (
    <div className="bg-ink text-white">
      <Container className="flex h-11 items-center justify-between gap-4 text-[12px]">
        <p className="truncate">
          <span className="text-brand">بورس قطعات لوازم خانگی</span>
          <span className="mx-2 text-white/30">|</span>
          <span className="text-white/70">قم · خرد و عمده · تعمیرگاه</span>
        </p>
        <div className="flex items-center gap-4">
          <a href={primary.href} className="hidden items-center gap-1.5 font-latin hover:text-brand sm:flex" dir="ltr">
            <Phone className="size-3.5" />
            {primary.value}
          </a>
          <a href={landline.href} className="hidden font-latin hover:text-brand md:flex" dir="ltr">
            {landline.value}
          </a>
          <a
            href={site.telegram}
            target="_blank"
            rel="noreferrer"
            className="flex items-center gap-1.5 hover:text-brand"
          >
            <Send className="size-3.5" />
            تلگرام
          </a>
        </div>
      </Container>
    </div>
  );
}