import { Col, List, Space, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";

const CardColorLegend = ({ bodyshop }) => {
  const { t } = useTranslation();
  const data = bodyshop.ssbuckets.map((bucket) => {
    let color = { r: 255, g: 255, b: 255 };

    if (bucket.color) {
      color = bucket.color;

      if (bucket.color.rgb) {
        color = bucket.color.rgb;
      }
    }

    return {
      label: bucket.label,
      color
    };
  });

  return (
    <Col>
      <Typography>{t("production.labels.legend")}</Typography>
      <List
        grid={{
          gutter: 16
        }}
        dataSource={data}
        renderItem={(item) => (
          <List.Item>
            <Space>
              <div
                style={{
                  width: "1.5rem",
                  aspectRatio: "1/1",
                  backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`
                }}
              ></div>
              <div>{item.label}</div>
            </Space>
          </List.Item>
        )}
      />
    </Col>
  );
};

export default CardColorLegend;
