import React from "react";

import BreadCrumb from "../BreadCrumb";
import SearchBox from "../SearchBox";
import TitleSubtitle from "../TitleSubtitle";
import CardHolder from "../CardHolder";
import ButtonNewDesign from "../ButtonNewDesign";
import Playlist from "../Playlist";
import Folderlists from "../Folderlist";

import graySearchIcon from "./images/gray-search-icon.svg";
import arrowLeft from "./images/arrow-left.svg";
import plus from "./images/plus.svg";

const FileManager = () => {
  return (
    <div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
      {/* ? right Section */}
      <div className="flex-1 ">
        <div className="px-7 py-5">
          {/* ? breadCrumb */}
          <div className="mb-5">
            <BreadCrumb />
          </div>
          {/* ? pageTitle & searchbox */}
          <div className="flex flex-row justify-between">
            {/* ? pageTitle */}
            <TitleSubtitle />
            {/* ? searchbox */}
            <div className="self-end">
              <SearchBox
                borderClr={"#EEEEEE"}
                backgroundColor={"#fff"}
                inputWidth={"100%"}
                placeHolderColor={"placeholder-gray-300"}
                searchIcon={graySearchIcon}
              />
            </div>
          </div>
          {/* cardHolder */}
          <Playlist />
        </div>
        <div className="bg-white">
          <div className="flex flex-col px-7 py-5">
            {/* pageTitleSubTitle & Buttons */}
            <div className="flex flex-row item-center justify-between">
              {/* ? pageTitle */}
              <div className="flex-1">
                <TitleSubtitle />
              </div>
              {/* buttons */}
              <div className="flex flex-row item-center justify-between self-center gap-2">
                <ButtonNewDesign
                  bgColor={"bg-blue-500"}
                  bgHoverColor={"hover:bg-blue-600"}
                  iconBgColor={null}
                  textColor={"text-white"}
                  border={"border"}
                  borderColor={"border-blue-500"}
                  borderRadius={"rounded"}
                  fontSize={"text-xs"}
                  padding={"p-3"}
                  icon={true}
                  buttonIcon={arrowLeft}
                />
                <ButtonNewDesign
                  bgColor={"bg-blue-100"}
                  bgHoverColor={"hover:bg-blue-600"}
                  iconBgColor={null}
                  textColor={"text-blue-900"}
                  border={"border"}
                  borderColor={"border-blue-500"}
                  borderRadius={"rounded"}
                  fontSize={"text-xs"}
                  padding={"p-3"}
                  icon={true}
                  buttonIcon={arrowLeft}
                />
              </div>
            </div>
            <Folderlists />
          </div>
        </div>
      </div>

      {/* left Section */}
      <CardHolder />
    </div>
  );
};

export default FileManager;