import React from 'react';

import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';

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

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