"use client"

import Image from "next/image"

export type Wx = { id: string; nickname: string; avatar?: string }

export default function WechatAccounts({ accounts }: { accounts: Wx[] }) {
  if (!accounts?.length) return <div className="text-sm text-muted-foreground">未绑定微信账号</div>
  return (
    <div className="grid grid-cols-2 gap-3">
      {accounts.map((a) => (
        <div key={a.id} className="flex items-center gap-3 rounded-lg border p-3 bg-white">
          <div className="relative h-10 w-10 rounded-full overflow-hidden border">
            <Image
              src={a.avatar || "/placeholder.svg?height=40&width=40&query=weChat+avatar"}
              alt={a.nickname}
              fill
              sizes="40px"
              className="object-cover"
            />
          </div>
          <div className="min-w-0">
            <div className="text-sm font-medium truncate">{a.nickname}</div>
            <div className="text-xs text-muted-foreground">已同步</div>
          </div>
        </div>
      ))}
    </div>
  )
}