"use client"

import { Users } from "lucide-react"
import { cn } from "@/lib/utils"
import {
  CONTACTS_PANEL_MUTED_ICON_CLASS,
  CONTACTS_PANEL_TITLE_CLASS,
} from "@/lib/contacts-chrome-classes"

type ContactsPanelLogoProps = {
  onClick: () => void
  className?: string
  /** Titre plus compact (barre détail / formulaire). */
  compact?: boolean
}

export function ContactsPanelLogo({
  onClick,
  className,
  compact = false,
}: ContactsPanelLogoProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex min-w-0 items-center gap-2 rounded-full px-1 py-0.5 text-left transition-colors hover:bg-accent",
        className,
      )}
      aria-label="Liste des contacts"
    >
      <Users
        className={cn(
          "shrink-0",
          compact ? "h-5 w-5" : "h-6 w-6",
          CONTACTS_PANEL_MUTED_ICON_CLASS,
        )}
      />
      <span className={cn(CONTACTS_PANEL_TITLE_CLASS, compact && "text-base")}>
        Contacts
      </span>
    </button>
  )
}