"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { CircleUser, CircleUserRound } from "lucide-react"
import type { Gender } from "@/types/family"

interface AvatarDisplayProps {
  imageUrl?: string  // 改为 URL
  fallbackText?: string
  gender?: Gender
  className?: string
}

export function AvatarDisplay({ imageUrl, fallbackText, gender, className }: AvatarDisplayProps) {
  // 如果有头像 URL，显示头像
  if (imageUrl) {
    return (
      <Avatar className={className}>
        <AvatarImage src={imageUrl} />
        <AvatarFallback className="text-lg font-serif bg-muted">{fallbackText}</AvatarFallback>
      </Avatar>
    )
  }

  // 没有头像，显示性别图标
  return (
    <Avatar className={className}>
      <AvatarFallback className="bg-muted flex items-center justify-center">
        {gender === 'FEMALE' ? (
          <CircleUserRound className="h-8 w-8 text-pink-400" />
        ) : (
          <CircleUser className="h-8 w-8 text-blue-400" />
        )}
      </AvatarFallback>
    </Avatar>
  )
}