import React, { JSX } from 'react';

import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';
import { Button } from '@redocly/theme/components/Button/Button';

export type DomainsPropertyProps = {
  entity: BffCatalogEntity;
};

export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
  const { useTranslate, usePageProps } = useThemeHooks();
  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
  const { translate } = useTranslate();

  const { domains = [] } = entity;

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <GraphIcon />
            {translate('catalog.domains.label', 'Domains')}
          </>
        }
        content={
          <>
            {domains?.map((domain) => (
              <Button
                key={domain?.id}
                variant="outlined"
                size="small"
                style={{ backgroundColor: 'var(--bg-color)' }}
                to={getEntityLink(domain)}
                icon={<GraphIcon />}
                external={true}
              >
                {domain?.title}
              </Button>
            ))}
          </>
        }
      />
    </div>
  );
}