import React from 'react';

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

export type CatalogOwnersCellProps = {
  owners: string[];
};

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