import React, { JSX } from 'react';

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

export type OwnersPropertyProps = {
  entity: BffCatalogEntity;
};

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

  const { owners = [] } = entity;

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <PeopleIcon />
            {translate('catalog.owners.label', 'Owners')}
          </>
        }
        content={
          <>
            {owners.map((owner) => {
              const entityLink = getEntityLink(owner);
              return (
                <Button
                  key={owner?.id}
                  variant="outlined"
                  size="small"
                  style={{
                    backgroundColor: 'var(--bg-color)',
                    borderRadius: 'var(--border-radius-xl)',
                    paddingLeft: '2px',
                  }}
                  to={entityLink}
                  icon={<CatalogAvatar value={owner?.key} size="small" />}
                  external={true}
                >
                  {owner?.title}
                </Button>
              );
            })}
          </>
        }
      />
    </div>
  );
}