"use client"

import Link from "next/link"
import { SidebarTrigger } from "@/components/ui/sidebar"
import { Building2 } from "lucide-react"
import type { User } from "@/lib/supabase/database.types"

interface TopBarProps {
  user: User | null
}

export function TopBar({ user: _ }: TopBarProps) {
  return (
    <header className="sticky top-0 z-50 flex h-[56px] shrink-0 items-center gap-[var(--ds-space-2x)] border-b border-[var(--ds-neutral-200)] bg-white px-[var(--ds-space-2x)]">
      <SidebarTrigger className="rounded-[var(--ds-radius-s)] text-[var(--ds-text-neutral-lighter)]" />
      <Link href="/dashboard" className="flex items-center gap-[var(--ds-space-1x)]">
        <div className="flex h-[var(--ds-space-4x)] w-[var(--ds-space-4x)] items-center justify-center rounded-[var(--ds-radius-m)] bg-[var(--ds-blueprimary-100)] text-[var(--ds-brand-400)]">
          <Building2 className="h-4 w-4" />
        </div>
        <span className="ds-type-global-s ds-type-semibold text-[var(--ds-text-neutral-default)]">
          Reservas y Espacios
        </span>
      </Link>
    </header>
  )
}