import React from 'react';
import styled from 'styled-components';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
import { Link } from '@redocly/theme/components/Link/Link';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type CatalogEntityLinksProps = {
  entity: BffCatalogEntity;
};

export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const links = Object.entries(entity.links || []);

  if (!links.length) {
    return null;
  }

  return (
    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
      <Heading>{translate('catalog.links.label', 'Links')}</Heading>
      {links.map(([key, value]) => (
        <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
          <CatalogEntityInfoBar
            leftContent={
              <Label>
                <LinkIcon /> {value.label}
              </Label>
            }
            rightContent={<LaunchIcon />}
            withSeparator={false}
          />
        </Link>
      ))}
    </LinksWrapper>
  );
}

const LinksWrapper = styled.div`
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  background-color: var(--catalog-metadata-bg-color);
  transition: all 0.2s ease-in-out;
  margin: var(--spacing-lg) 0;
`;

const Label = styled.span`
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
  font-weight: var(--font-weight-medium);
  color: var(--catalog-metadata-label-color);
`;

const Heading = styled.h2`
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
  font-size: var(--font-size-md);
  color: var(--catalog-metadata-heading-color);
`;