import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";
import type { DiagramNode } from "../graph";

export function OrgchartPersonNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const icon = d.icon ?? "\u{1F464}";
  const role = d.tag;
  const department = d.group;
  const accentColor = d.color || undefined;

  return (
    <div className="oc-person" style={accentColor ? { borderLeftColor: accentColor } : undefined}>
      <div className="oc-person-avatar">{icon}</div>
      <div className="oc-person-info">
        <div className="oc-person-name">{d.label}</div>
        {role && <div className="oc-person-role">{role}</div>}
        {department && <div className="oc-person-dept">{department}</div>}
      </div>
      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
      <Handle type="target" position={Position.Left} id="left" style={{ opacity: 0 }} />
      <Handle type="source" position={Position.Right} id="right" style={{ opacity: 0 }} />
    </div>
  );
}
