import { Text } from 'components/common';

const getPercentageBetween = (value: number, min: number, max: number) => {
  return ((100 - 0) * (value - min)) / (max - min) + 0;
};

function getWidth(value: number, total: number) {
  return getPercentageBetween(value, 0, total) + '%';
}

export const AttributesList = ({
  data,
  total = 0,
}: {
  data?: {
    id: string;
    label: string;
    value: number;
  }[];
  total?: number;
}) => {
  return (
    <div className="flex flexColumn">
      {data?.map((a) => {
        return (
          <div className="flexNone paddingX3 paddingY4 hover1" key={a.id}>
            <div className="flex justifyBetween">
              <Text size="s" weight="medium" truncate title={a.label}>
                {a.label}
              </Text>
              <Text size="s">{a.value}</Text>
            </div>
            <div className="marginY2 bg-grayA02">
              <div
                className="bg-blue"
                style={{
                  maxWidth: '100%',
                  width: getWidth(a.value, total),
                  height: 4,
                }}
              ></div>
            </div>
          </div>
        );
      })}
    </div>
  );
};