import React from 'react';
import { Box, Text, ThemeColorType } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';

export const ServiceStatus = ({
  statusDetail,
  dotColor,
}: {
  statusDetail: string;
  dotColor: ThemeColorType;
}) => {
  const { t } = useTranslation('fiber');

  return (
    <Box
      paddingX={[3, 4]}
      paddingY={[2, 3]}
      borderStyle="solid"
      borderColor="grey200"
      borderWidth="1px"
      display="flex"
      alignItems="center"
      gap={[3, 4]}
    >
      <Box background={dotColor} borderRadius="xLarge" height={2} width={2} />
      <Box>
        <Text variant="eyebrowMedium" marginBottom={3}>
          {t('subscriptionDetailsStatus.eyeBrow')}{' '}
        </Text>
        <Text variant="subtitleBold">{statusDetail}</Text>
      </Box>
    </Box>
  );
};