chinese-family-tree-2/components/member-name-with-status.tsx

import { cn } from "@/lib/utils"
import Link from "next/link"

interface MemberNameWithStatusProps {
  name: string
  isDead?: boolean
  className?: string
  showDot?: boolean
  dotPosition?: "left" | "top-left"
  memberId?: string
  treeId?: string
  clickable?: boolean
}

export function MemberNameWithStatus({ 
  name, 
  isDead = false, 
  className = "",
  showDot = true,
  dotPosition = "top-left",
  memberId,
  treeId,
  clickable = true
}: MemberNameWithStatusProps) {
  const href = memberId 
    ? `/members/${memberId}${treeId ? `?treeId=${treeId}` : ''}`
    : '#'
  const content = (
    <>
      {showDot && dotPosition === "left" && (
        <span className={cn(
          "h-1.5 w-1.5 rounded-full flex-shrink-0",
          isDead ? "bg-gray-400" : "bg-green-500"
        )}></span>
      )}
      <span className={isDead ? "text-muted-foreground" : "text-foreground"}>
        {name}
      </span>
      {showDot && dotPosition === "top-left" && (
        <span className={cn(
          "absolute right-0.5 top-1 h-2 w-2 rounded-full",
          isDead ? "bg-gray-400" : "bg-green-500"
        )}></span>
      )}
    </>
  )

  if (!showDot) {
    if (clickable && memberId) {
      return (
        <Link 
          href={href}
          className={cn(
            isDead ? "text-muted-foreground" : "text-foreground",
            "hover:underline hover:text-primary transition-colors cursor-pointer",
            className
          )}
        >
          {name}
        </Link>
      )
    }
    return (
      <span className={cn(
        isDead ? "text-muted-foreground" : "text-foreground",
        className
      )}>
        {name}
      </span>
    )
  }

  if (clickable && memberId) {
    if (dotPosition === "left") {
      return (
        <Link 
          href={href}
          className={cn(
            "flex items-center gap-1.5 hover:underline hover:text-primary transition-colors cursor-pointer",
            className
          )}
        >
          {content}
        </Link>
      )
    }

    return (
      <Link 
        href={href}
        className={cn(
          "relative inline-flex items-center pr-3 hover:underline hover:text-primary transition-colors cursor-pointer",
          className
        )}
      >
        {content}
      </Link>
    )
  }

  if (dotPosition === "left") {
    return (
      <span className={cn("flex items-center gap-1.5", className)}>
        {content}
      </span>
    )
  }

  return (
    <span className={cn("relative inline-flex items-center pr-3", className)}>
      {content}
    </span>
  )
}