import { Title } from "../../components/Title";
import { pointColors } from "../../Map/layers-config";

export function Legend() {
  return (
    <div className="absolute bottom-[20px] right-[20px] bg-white-background w-[250px] rounded-xl p-4 text-xs text-grey z-10">
      <Title
        text={"Категории объекта объекта размещения"}
        className={"text-center"}
      />
      <Title
        text={"Размер кружка пропорционален прогнозному трафику"}
        className={"text-center mb-1"}
        classNameText={"lowercase"}
      />
      <div className="space-y-2">
        {Object.entries(pointColors).map(([label, color]) => (
          <div className="flex gap-2 items-center" key={label}>
            <span
              className="rounded-xl w-3 h-3 inline-block"
              style={{ backgroundColor: color }}
            />
            <span>{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}