"use client"

import { Menu, Search, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import {
  CONTACTS_ICON_BTN_CLASS,
  CONTACTS_SEARCH_BAR_CLASS,
  CONTACTS_SEARCH_INPUT_CLASS,
} from "@/lib/contacts-chrome-classes"
import { MAIL_SETTINGS_BASE_PATH } from "@/lib/mail-settings/settings-nav"
import { cn } from "@/lib/utils"

interface ContactsHeaderProps {
  searchQuery: string
  onSearchChange: (q: string) => void
  sidebarOpen: boolean
  onOpenSidebar: () => void
}

export function ContactsHeader({
  searchQuery,
  onSearchChange,
  sidebarOpen,
  onOpenSidebar,
}: ContactsHeaderProps) {
  return (
    <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border bg-mail-surface px-3 sm:gap-4 sm:px-6">
      {!sidebarOpen && (
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className={cn("h-10 w-10 shrink-0 rounded-full", CONTACTS_ICON_BTN_CLASS)}
          onClick={onOpenSidebar}
          aria-label="Ouvrir le menu"
        >
          <Menu className="h-5 w-5" />
        </Button>
      )}

      <div className="flex min-w-0 flex-1 items-center">
        <div className={CONTACTS_SEARCH_BAR_CLASS}>
          <Search className="h-5 w-5 shrink-0 text-muted-foreground" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="Rechercher"
            className={CONTACTS_SEARCH_INPUT_CLASS}
          />
          {searchQuery && (
            <button
              type="button"
              onClick={() => onSearchChange("")}
              className="rounded-full p-1 hover:bg-accent"
              aria-label="Effacer la recherche"
            >
              <X className="h-4 w-4 text-muted-foreground" />
            </button>
          )}
        </div>
      </div>

      <HeaderAccountActions
        className="shrink-0 pl-1 sm:pl-4"
        settingsHref={`${MAIL_SETTINGS_BASE_PATH}/accounts`}
      />
    </header>
  )
}