"use client"

import { cn } from "@/lib/utils"
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
import {
  CONTACTS_PANEL_TITLE_CLASS,
} from "@/lib/contacts-chrome-classes"

const CONTACTS_MARK_SRC = suitePublicAsset("/contacts-mark.svg")

type ContactsPanelLogoProps = {
  onClick: () => void
  className?: string
  titleClassName?: string
  markClassName?: string
}

export function ContactsPanelLogo({
  onClick,
  className,
  titleClassName = CONTACTS_PANEL_TITLE_CLASS,
  markClassName = "h-8 w-8",
}: 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"
    >
      <img
        src={CONTACTS_MARK_SRC}
        alt=""
        className={cn("shrink-0 object-contain", markClassName)}
        draggable={false}
        aria-hidden
      />
      <span className={cn("truncate", titleClassName)}>Contacts</span>
    </button>
  )
}
