import type { ReactNode } from 'react';
import React from 'react';

import Typography from '../../Typography';

import { LegendCircle, LegendItem, LegendValue } from './StyledLegend';
import { getTextComponent } from './utils';
import type { SegmentedBarLegendDisplayValue } from './types';

interface ProgressSegmentedBarLegendItemProps {
  title: string;
  color: string;
  displayValue?: SegmentedBarLegendDisplayValue;
  testID?: string;
}

const ProgressSegmentedBarLegendItem = ({
  title,
  color,
  displayValue,
  testID,
}: ProgressSegmentedBarLegendItemProps): ReactNode => {
  const renderedDisplayValue = getTextComponent(
    displayValue,
    <Typography.Caption intent="muted">{displayValue}</Typography.Caption>
  );

  return (
    <LegendItem testID={testID}>
      <LegendCircle themeColor={color} />
      <Typography.Caption>{`${title}:`}</Typography.Caption>
      {renderedDisplayValue ? (
        <LegendValue>{renderedDisplayValue}</LegendValue>
      ) : null}
    </LegendItem>
  );
};

export default ProgressSegmentedBarLegendItem;