import { CheckBoxIcon, DisabledCheckBoxIcon } from '../icons/RandomIcons';

const MapLayers = () => {
  return (
    <div className="hidden md:flex flex-col lg:flex-row items-start self-stretch bg-slate-50 p-4 gap-4 rounded-2xl mb-8 lg:mb-[132px]">
      <div className="flex items-center gap-2">
        <CheckBoxIcon />
        <span className="text-[#1D293D] text-sm">
          {"صفقات وزارة العدل"}
        </span>
      </div>
      <div className="flex items-center gap-2">
        <CheckBoxIcon />
        <span className="text-[#1D293D] text-sm">
          {"المخطط المعتمد"}
        </span>
      </div>
      <div className="flex items-center gap-2">
        <DisabledCheckBoxIcon />
        <span className="text-[#1D293D] text-sm">
          {"صفقات السجل العقاري"}
        </span>
      </div>
    </div>
  );
};

export default MapLayers;