"use client"

import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"
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 || ""
  const initial = senderInitial(name)
  const bgColor = avatarColor(name)

  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,
      )}
    >
      {contact.avatarUrl ? (
        <img
          src={contact.avatarUrl}
          alt={name}
          className="h-10 w-10 shrink-0 rounded-full object-cover"
        />
      ) : (
        <div
          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-medium text-white"
          style={{ backgroundColor: bgColor }}
        >
          {initial}
        </div>
      )}
      <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>
  )
}