"use client"

import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"

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="flex w-full items-center gap-3 px-4 h-14 hover:bg-gray-50 cursor-pointer text-left"
    >
      {contact.avatarUrl ? (
        <img
          src={contact.avatarUrl}
          alt={name}
          className="h-10 w-10 rounded-full object-cover shrink-0"
        />
      ) : (
        <div
          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-white font-medium text-sm"
          style={{ backgroundColor: bgColor }}
        >
          {initial}
        </div>
      )}
      <div className="min-w-0 flex-1">
        <div className="truncate text-sm text-gray-900">{name}</div>
        {subtitle && displayName && (
          <div className="truncate text-xs text-gray-500">{subtitle}</div>
        )}
      </div>
    </button>
  )
}
