"use client"

import Image from "next/image"
import { Badge } from "@/components/ui/badge"

export default function ProfileHeader({
  name,
  avatar,
  email,
  phone,
  tags = [],
}: {
  name: string
  avatar?: string
  email: string
  phone: string
  tags?: string[]
}) {
  return (
    <div className="flex items-center gap-3">
      <div className="relative h-12 w-12 rounded-full overflow-hidden border bg-white">
        <Image
          src={avatar || "/placeholder.svg?height=48&width=48&query=user+avatar"}
          alt={`${name} 的头像`}
          fill
          sizes="48px"
          className="object-cover"
        />
      </div>
      <div className="min-w-0">
        <div className="font-medium truncate">{name}</div>
        <div className="text-xs text-muted-foreground truncate">{email}</div>
        <div className="text-xs text-muted-foreground">{phone}</div>
        {!!tags.length && (
          <div className="flex flex-wrap gap-1 mt-1">
            {tags.slice(0, 3).map((t) => (
              <Badge key={t} variant="secondary" className="text-[10px]">
                {t}
              </Badge>
            ))}
            {tags.length > 3 && <Badge variant="outline" className="text-[10px]">+{tags.length - 3}</Badge>}
          </div>
        )}
      </div>
    </div>
  )
}
