import React, { JSX } from 'react';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { NotesIcon } from '@redocly/theme/icons/NotesIcon/NotesIcon';
import { Tag } from '@redocly/theme/components/Tag/Tag';
import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type FormatPropertyProps = {
  entity: BffCatalogEntity;
};

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

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <NotesIcon />
            {translate('catalog.format.label', 'Format')}
          </>
        }
        content={
          <>
            <Tag
              variant="outline"
              textTransform="none"
              key={entity.metadata?.specType}
              style={{ backgroundColor: 'var(--bg-color)' }}
            >
              {entity.metadata?.specType}
            </Tag>
          </>
        }
        hoverEffect={false}
      />
    </div>
  );
}