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

import { H3 } from '@redocly/theme/components/Typography/H3';
import { Tag } from '@redocly/theme/components/Tag/Tag';

export type CatalogPageDescriptionProps = {
  title: string;
  titleTranslationKey?: string;
  description: string;
  descriptionTranslationKey?: string;
  tag: number | string;
};

export function CatalogPageDescription({
  title,
  titleTranslationKey,
  description,
  descriptionTranslationKey,
  tag,
}: CatalogPageDescriptionProps) {
  return (
    <CatalogPageDescriptionWrapper>
      <CatalogTitleWrapper data-component-name="Catalog/CatalogEntityTitle">
        <CatalogTitle data-translation-key={titleTranslationKey}>{title}</CatalogTitle>
        <Tag borderless textTransform="none">
          {tag}
        </Tag>
      </CatalogTitleWrapper>
      <CatalogDescription data-translation-key={descriptionTranslationKey}>
        {description}
      </CatalogDescription>
    </CatalogPageDescriptionWrapper>
  );
}

const CatalogPageDescriptionWrapper = styled.div`
  margin: var(--catalog-heading-margin);
`;

const CatalogTitleWrapper = styled.div`
  display: flex;
  align-items: center;
  color: var(--catalog-title-text-color);
  font-weight: var(--catalog-title-font-weight) !important;
  font-size: var(--catalog-title-font-size);
`;

const CatalogTitle = styled(H3)`
  color: var(--catalog-title-text-color);
  font-weight: var(--catalog-title-font-weight) !important;
  font-size: var(--catalog-title-font-size);
  margin: var(--catalog-title-margin);
  margin-right: var(--catalog-title-spacing-right);
`;

const CatalogDescription = styled.p`
  color: var(--catalog-description-text-color);
  font-weight: var(--catalog-description-font-weight);
  font-size: var(--catalog-description-font-size);
  margin: 0;
  line-height: var(--catalog-description-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
`;