"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
}

export function ContactsPanelLogo({ onClick, className }: 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("h-6 w-6 shrink-0", CONTACTS_PANEL_MUTED_ICON_CLASS)} />
      <span className={CONTACTS_PANEL_TITLE_CLASS}>Contacts</span>
    </button>
  )
}
