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

import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
import { BffCatalogEntity } from '@redocly/theme/core/types';

type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
export type CatalogEntityCellProps<T extends Entity> = {
  entity: T;
};

export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
  return (
    <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
      <CatalogEntityTypeIcon entityType={entity.type} size="large" defaultColors={true} />
      <EntityTitleContent>
        <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
          <CatalogHighlight>{entity.title}</CatalogHighlight>
        </EntityTitle>
        {entity.summary && (
          <EntitySummary>
            <CatalogHighlight>{entity.summary}</CatalogHighlight>
          </EntitySummary>
        )}
      </EntityTitleContent>
    </EntityTitleCellWrapper>
  );
}

const EntityTitleCellWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: var(--catalog-table-title-cell-gap);
  max-width: 100%;
`;

const EntityTitleContent = styled.div`
  display: flex;
  flex-direction: column;
  max-width: calc(
    100% - var(--catalog-table-entity-title-content-offset)
  ); /* Account for icon width (32px) + gap (8px) */
  overflow: hidden;
`;

const EntityTitle = styled.div`
  font-size: var(--catalog-table-entity-title-font-size);
  line-height: var(--catalog-table-entity-title-line-height);
  font-weight: var(--catalog-table-entity-title-font-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const EntitySummary = styled.div`
  font-size: var(--catalog-table-entity-summary-font-size);
  line-height: var(--catalog-table-entity-summary-line-height);
  color: var(--catalog-table-description-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
`;