"use client"

import Link from "next/link"
import { BellIcon, HelpCircleIcon, UserCircleIcon } from "lucide-react"

import { Button } from "@/src/components/ui/button"
import { useGetRestaurantInfoQuery } from "@/src/state/auth"

export default function Navbar() {
  const { data } = useGetRestaurantInfoQuery()
  const restaurant = data?.data
  const isIncomplete = !restaurant?.description || !restaurant?.logoUrl || !restaurant?.address

  return (
    <header className="flex h-16 shrink-0 items-center gap-4 border-b bg-background px-4 md:px-6">
      <div className="flex-1">
        {isIncomplete ? (
          <Link
            href="/settings/profile"
            className="inline-flex items-center gap-2 rounded-lg bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary hover:bg-primary/20 transition-colors"
          >
            <UserCircleIcon className="size-4 shrink-0" />
            <span>Complétez votre profil restaurant</span>
          </Link>
        ) : (
          <p className="text-sm text-muted-foreground">
            Bienvenue sur votre espace restaurant
          </p>
        )}
      </div>

      <div className="flex items-center gap-1">
        <Button variant="ghost" size="icon-sm">
          <HelpCircleIcon className="size-5 text-muted-foreground" />
        </Button>
        <Button variant="ghost" size="icon-sm" className="relative">
          <BellIcon className="size-5 text-muted-foreground" />
          <span className="absolute top-1 right-1 size-2 rounded-full bg-primary" />
        </Button>
      </div>
    </header>
  )
}