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

import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';

export type CatalogUserEntityCellProps = {
  name: string;
  email: string;
};

export function CatalogUserEntityCell({ name, email }: CatalogUserEntityCellProps) {
  return (
    <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogUserEntityCell">
      <CatalogAvatar value={name} size="medium" />
      <EntityTitleContent>
        <EntityTitle>
          <CatalogHighlight>{name}</CatalogHighlight>
        </EntityTitle>
        <Email>
          <CatalogHighlight>{email}</CatalogHighlight>
        </Email>
      </EntityTitleContent>
    </EntityTitleCellWrapper>
  );
}

const EntityTitleCellWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
`;

const EntityTitleContent = styled.div`
  display: flex;
  flex-direction: column;
  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;
`;

export const Email = styled.div`
  font-size: var(--catalog-user-entity-cell-email-font-size);
  line-height: var(--catalog-user-entity-cell-email-line-height);
  color: var(--color-blue-6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
`;