"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"
import { SUITE_APP_LOGO_LOCKUP_CLASS, SUITE_APP_LOGO_MARK_CLASS } from "@/lib/suite/suite-chrome-classes"
import { ULTICARDS_APP_NAME } from "@/lib/suite/page-metadata"

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 = SUITE_APP_LOGO_MARK_CLASS,
}: ContactsPanelLogoProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        SUITE_APP_LOGO_LOCKUP_CLASS,
        "min-w-0 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={titleClassName}>{ULTICARDS_APP_NAME}</span>
    </button>
  )
}