import { Flex, Typography } from 'antd';

const { Text } = Typography;

export type MultiProgressItem = {
  label: string;
  percent: number;
  color: string;
};

export type MultiProgressUIProps = {
  label: string;
  meta?: string;
  data: MultiProgressItem[];
};

export function MultiProgressUI({ label, meta, data }: MultiProgressUIProps) {
  return (
    <Flex vertical gap={12} className="dashboard-multi-progress-ui">
      <div className="dashboard-multi-progress-ui__header">
        <div className="dashboard-multi-progress-ui__copy">
          <Text className="dashboard-multi-progress-ui__label">{label}</Text>
          {meta ? <Text type="secondary">{meta}</Text> : null}
        </div>
      </div>

      <div className="dashboard-multi-progress-ui__bar">
        {data.map((item) => (
          <div
            key={item.label}
            className="dashboard-multi-progress-ui__segment"
            style={{ width: `${item.percent}%`, backgroundColor: item.color }}
          />
        ))}
      </div>

      <Flex vertical gap={8}>
        {data.map((item) => (
          <div key={item.label} className="dashboard-multi-progress-ui__legend">
            <span
              className="dashboard-multi-progress-ui__swatch"
              style={{ backgroundColor: item.color }}
            />
            <Text>{item.label}</Text>
            <Text className="dashboard-multi-progress-ui__percent">{item.percent}%</Text>
          </div>
        ))}
      </Flex>
    </Flex>
  );
}
