import React, { JSX } from 'react';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
import { Email } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type UserEmailPropertyProps = {
  entity: BffCatalogEntity;
};

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

  const email = entity.metadata?.email;

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <EmailIcon />
            {translate('catalog.email.label', 'Email')}
          </>
        }
        content={<Email>{email}</Email>}
        onClick={() => {
          window.open(`mailto:${email}`, '_blank');
        }}
      />
    </div>
  );
}