import { X } from "lucide-react";
import BankDetailSidebar from "../bankdetails/page";
import EditTimings from "../editTimings/page";
import { EditProfileModal } from "../editProfile/page";
import { SupportCard } from "../support/page";
import ContactUs from "../contactus/page";
import OrderDetail from "../orderDetails/page";
const titleMap: Record<string, string> = {
  profile: "Edit Profile",
  bankDetails: "Bank account Details",
  timings: "Vendor delivery Timings",
  support: "Support",
  contact: "Contact Us",
  orderDetail: "Order Detail",
};
const SidebarModal = ({ type, onClose }: { type: string; onClose: () => void }) => {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end">
      <div className="w-[500px] h-full bg-white shadow-lg shadow-gray-500/50 p-6 transition-transform transform translate-x-0">
        <button className="absolute top-4 right-4" onClick={onClose}>
          <X className="h-5 w-5" />
        </button>

        <span className="text-[32px] text-[#000000] font-[600]">{titleMap[type]}</span>

        <div className="mt-4 h-[84vh] overflow-y-scroll no-scrollbar">
          {type === "profile" && <EditProfileModal />}
          {type === "bankDetails" && <BankDetailSidebar />}
          {type === "timings" && <EditTimings />}
          {type === "contact" && <ContactUs />}
          {type === "support" && <SupportCard />}
          {type === "orderDetail" && <OrderDetail />}
        </div>
      </div>
    </div>

  );
};

export default SidebarModal;