content: import { Box } from '@rocket.chat/fuselage';
  import React from 'react';
  
  import { useTranslation } from '../../../contexts/TranslationContext';
  import { AsyncStatePhase } from '../../../hooks/useAsyncState';
  import { useEndpointData } from '../../../hooks/useEndpointData';
  import { FormSkeleton } from '../directory/Skeleton';
  import Field from './Field';
  import Info from './Info';
  import Label from './Label';
  
  const CustomField = ({ id, value }) => {
  	const t = useTranslation();
  	const { value: data, phase: state, error } = useEndpointData(`livechat/custom-fields/${id}`);
  	if (state === AsyncStatePhase.LOADING) {
  		return <FormSkeleton />;
  	}
  	if (error || !data || !data.customField) {
  		return <Box mbs='x16'>{t('Custom_Field_Not_Found')}</Box>;
  	}
  	const { label } = data.customField;
  	return (
  		label && (
  			<Field>
  				<Label>{label}</Label>
  				<Info>{value}</Info>
  			</Field>
  		)
  	);
  };
  
  export default CustomField;
  