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

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

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

export function CatalogEntityRelationsLinkedNode({
  label,
  entityType,
  className,
  to,
}: CatalogEntityRelationsLinkedNodeProps): React.ReactElement {
  return (
    <Link
      className={className}
      to={to}
      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode"
    >
      <CatalogEntityRelationsNodeContent entityType={entityType} label={label} isRoot={false} />
      <Handle type={GraphHandleType.Target} position={Position.Top} id={GraphHandleType.Target} />
    </Link>
  );
}