import { useMode } from "../stores/useMode";
import { MODES } from "../config";
import { APPROVE_COLOR, WORKING_COLOR } from "./Layers/layers-config";
import { Title } from "../components/Title";

const LegendPointItem = ({ color, name }) => {
  return (
    <div className="flex gap-2 items-center">
      <span
        className="rounded-xl w-3 h-3 inline-block"
        style={{ backgroundColor: color }}
      />
      <span>{name}</span>
    </div>
  );
};

export function Legend() {
  const { mode } = useMode();

  const getContent = () => {
    if (mode === MODES.APPROVE_WORKING) {
      return (
        <>
          <Title text={"Статус локации"} className={"text-center"} />
          <div className="space-y-2">
            <LegendPointItem
              name="Согласование-установка"
              color={APPROVE_COLOR}
            />
            <LegendPointItem name="Работает" color={WORKING_COLOR} />
          </div>
        </>
      );
    }

    return null;
  };

  return (
    <div className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3">
      {getContent()}
    </div>
  );
}
