import { Headphones, MapPin, Truck } from "lucide-react";
import { Container } from "@/components/Container";
import { site } from "@/lib/data";

export function TopBar() {
  return (
    <div className="bg-navy text-white">
      <Container className="flex h-10 items-center justify-between gap-4 text-[12px]">
        <div className="flex min-w-0 items-center gap-4">
          <span className="hidden items-center gap-1.5 sm:flex">
            <Truck className="size-3.5 shrink-0" />
            ارسال رایگان سفارش‌های بالای ۵۰۰ هزار تومان
          </span>
          <span className="flex items-center gap-1.5">
            <Headphones className="size-3.5 shrink-0" />
            {site.hours}
          </span>
        </div>
        <div className="flex shrink-0 items-center gap-4">
          <span className="hidden items-center gap-1.5 md:flex">
            <MapPin className="size-3.5" />
            قم، سالاریه
          </span>
          <a href={site.phoneHref} className="font-latin tracking-wide" dir="ltr">
            {site.phone}
          </a>
        </div>
      </Container>
    </div>
  );
}