"use client"

import { ContactAvatar } from "@/components/gmail/contacts/contact-avatar"
import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
import {
  CONTACTS_PANEL_ROW_CLASS,
  CONTACTS_MUTED_TEXT,
  CONTACTS_HEADING_TEXT,
} from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"

interface ContactRowProps {
  contact: FullContact
  onClick: () => void
}

export function ContactRow({ contact, onClick }: ContactRowProps) {
  const displayName = fullContactDisplayName(contact)
  const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
  const subtitle = contact.emails[0]?.value || contact.phones[0]?.value || ""

  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex h-14 w-full items-center gap-3 px-4 text-left",
        CONTACTS_PANEL_ROW_CLASS,
      )}
    >
      <ContactAvatar contact={contact} name={name} size="sm" />
      <div className="min-w-0 flex-1">
        <p className={cn("truncate text-sm", CONTACTS_HEADING_TEXT)}>{name}</p>
        {subtitle && displayName ? (
          <p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>{subtitle}</p>
        ) : null}
      </div>
    </button>
  )
}
