'use client'
// src/components/shell/Topbar.tsx
// Input: children (breadcrumbs slot)
// Output: fixed topbar 52px with breadcrumbs, search, status dots, user menu
// Rationale: global header for all app screens

import { Search, User, ChevronDown } from 'lucide-react'
import { StatusDot } from '@/components/ui/StatusDot'

interface TopbarProps {
  children?: React.ReactNode
}

export function Topbar({ children }: TopbarProps) {
  return (
    <header className="fixed top-0 left-[220px] right-0 h-[52px] bg-bg-elevated border-b border-bg-border z-30 flex items-center px-6 gap-4">
      {/* Breadcrumbs slot */}
      <div className="flex-1 flex items-center min-w-0">
        {children}
      </div>

      {/* Search input (simulated) */}
      <div className="relative w-48">
        <Search
          size={14}
          strokeWidth={1.5}
          className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none"
        />
        <input
          type="text"
          placeholder="Rechercher..."
          className="
            w-full h-[30px] bg-bg-subtle border border-bg-border rounded-md
            pl-8 pr-3 text-body text-text-primary placeholder:text-text-muted
            focus:border-accent focus:shadow-[0_0_0_2px_rgba(61,184,232,0.1)]
            transition-colors duration-fast
          "
        />
      </div>

      {/* Status dots */}
      <div className="flex items-center gap-4 px-4 border-l border-bg-border">
        <StatusDot status="online" label="Capteurs" size="sm" />
        <StatusDot status="online" label="Mesures 24h" size="sm" />
        <StatusDot status="warning" label="2 alertes" size="sm" />
      </div>

      {/* User menu */}
      <div className="flex items-center gap-2 pl-4 border-l border-bg-border cursor-pointer group">
        <div className="w-7 h-7 rounded-full bg-bg-overlay border border-bg-border flex items-center justify-center">
          <User size={14} strokeWidth={1.5} className="text-text-secondary" />
        </div>
        <span className="text-body text-text-secondary group-hover:text-text-primary transition-colors duration-fast">
          Ingénieur
        </span>
        <ChevronDown size={14} strokeWidth={1.5} className="text-text-muted" />
      </div>
    </header>
  )
}