import React from "react";
import useLayoutStore from "../../store/builder/uselayoutStore";

const SelectFloorPlan: React.FC = () => {
  const { currentLayout, setLayout } = useLayoutStore();
  return (
    <div className="select-floorplane-wrapper">
      Don't have an idea? Use these presets!
      <div className="presets-container">
        <button
          className={`preset ${currentLayout === "layout1" ? "active" : ""}`}
          onClick={() => {
            setLayout("layout1");
          }}
        >
          Preset 1
        </button>
        <button
          className={`preset ${currentLayout === "layout2" ? "active" : ""}`}
          onClick={() => {
            setLayout("layout2");
          }}
        >
          Preset 2
        </button>
      </div>
    </div>
  );
};

export default SelectFloorPlan;
