"use client"

import { Search, X } from "lucide-react"
import { HeaderAccountActions } from "@/components/gmail/header-account-actions"

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

export function ContactsHeader({ searchQuery, onSearchChange }: ContactsHeaderProps) {
  return (
    <header className="flex h-16 shrink-0 items-center gap-4 border-b border-gray-200 px-6">
      <div className="flex min-w-0 flex-1 items-center">
        <div className="flex h-12 w-full max-w-[720px] items-center gap-3 rounded-full bg-[#edf2fc] px-4 transition-colors focus-within:bg-white focus-within:shadow-md focus-within:ring-1 focus-within:ring-gray-200">
          <Search className="h-5 w-5 shrink-0 text-[#5f6368]" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="Rechercher"
            className="flex-1 bg-transparent text-sm text-[#1f1f1f] outline-none placeholder:text-[#5f6368]"
          />
          {searchQuery && (
            <button
              type="button"
              onClick={() => onSearchChange("")}
              className="rounded-full p-1 hover:bg-gray-100"
              aria-label="Effacer la recherche"
            >
              <X className="h-4 w-4 text-[#5f6368]" />
            </button>
          )}
        </div>
      </div>

      <HeaderAccountActions className="pl-4" />
    </header>
  )
}