import { Flex, Progress, Typography } from 'antd';
import type { ProgressUIProps } from './types';

const { Text } = Typography;

export function ProgressUI({ label, meta, data }: ProgressUIProps) {
  return (
    <Flex vertical gap={8} className="dashboard-progress-ui">
      <div className="dashboard-progress-ui__header">
        <div className="dashboard-progress-ui__copy">
          <Text className="dashboard-progress-ui__label">{label}</Text>
          {meta ? <Text type="secondary">{meta}</Text> : null}
        </div>
        <Text className="dashboard-progress-ui__percent">{data.percent}%</Text>
      </div>

      <Progress
        percent={data.percent}
        size="small"
        showInfo={false}
        strokeColor={data.color}
        className="dashboard-progress-ui__bar"
      />
    </Flex>
  );
}
