import React, { useState } from "react";
import Search from "../../ui/inputs/Search";
import DropDownList from "../../ui/list/DropDownList";

const Outline: React.FC = () => {
  const [searchValue, setSearchValue] = useState<string>("");

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
    // console.log(value); // Log the search value if needed
  };

  const dropdownItems = [
    { id: "1", name: "Ground Floor", active: true },
    // { id: "2", name: "Floor 1" },
  ]; // Example dropdown items

  return (
    <div className="outline-container">
      <Search onChange={handleSearchChange} />
      {searchValue ? (
        <div className="searched-content">
          <p>Results for "{searchValue}"</p>
        </div>
      ) : (
        <div className="outline-content-container">
          <section className="outline-section">
            <DropDownList
              value="Layers"
              items={dropdownItems}
              defaultOpen={true}
              showKebabMenu={false}
              showFocusIcon={true}
              remove
            />
          </section>
          <section className="outline-section overflow">
            <DropDownList
              value="Scene"
              items={dropdownItems}
              defaultOpen={true}
              listType="outline"
              showKebabMenu={false}
              showAddIcon={false}
            />
          </section>
        </div>
      )}
    </div>
  );
};

export default Outline;
