import React, { JSX } from 'react';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
import { removeLeadingSlash } from '@redocly/theme/core/utils';
import { Tag } from '@redocly/theme/components/Tag/Tag';
import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type GitPropertyProps = {
  entity: BffCatalogEntity;
};

export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const git = entity.git;

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/GitProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <GithubIcon />
            {translate('catalog.repositories.label', 'Repositories')}
          </>
        }
        content={
          <>
            {git?.map((repo) => {
              const url = new URL(repo);
              const repoName = removeLeadingSlash(url.pathname);
              return (
                <Tag key={repo} textTransform="none" style={{ backgroundColor: 'var(--bg-color)' }}>
                  {repoName}
                </Tag>
              );
            })}
          </>
        }
      />
    </div>
  );
}