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" },
    { 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">
          <DropDownList
            value="Layers"
            items={dropdownItems}
            defaultOpen={true}
            showKebabMenu={false}
            showFocusIcon={true}
            remove
          />
          <DropDownList
            value="Scene"
            items={dropdownItems}
            defaultOpen={true}
            listType="outline"
            showKebabMenu={false}
            showAddIcon={false}
          />
        </div>
      )}
    </div>
  );
};

export default Outline;