import React from 'react';

import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';

export type CatalogDomainsCellProps = {
  domains: string[];
};

export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
  return (
    <div data-component-name="Catalog/CatalogTableView/CatalogDomainsCell">
      <CatalogTagsWithTooltip
        data-testid="catalog-domains-cell"
        items={domains}
        showPlaceholder={false}
        tagProps={{
          style: {
            fontSize: 'var(--font-size-base)',
            backgroundColor: 'transparent',
            borderRadius: 'var(--border-radius-xl)',
          },
          textTransform: 'none',
        }}
      />
    </div>
  );
}