import React from 'react';
import { Handle, Position } from '@xyflow/react';

import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
import { CatalogEntityRelationsNodeContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent';

export type CatalogEntityRelationsRootNodeProps = {
  label: string;
  entityType: string;
  className?: string;
};

export function CatalogEntityRelationsRootNode({
  label,
  entityType,
  className,
}: CatalogEntityRelationsRootNodeProps): React.ReactElement {
  return (
    <div
      className={className}
      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode"
    >
      <CatalogEntityRelationsNodeContent entityType={entityType} label={label} isRoot={true} />
      <Handle
        type={GraphHandleType.Source}
        position={Position.Bottom}
        id={GraphHandleType.Source}
      />
    </div>
  );
}