import React, { useState } from "react";
import { FaUser, FaLock, FaMoneyBillTransfer, FaPiggyBank } from "react-icons/fa6";

interface SettingsLayoutProps {
  children: (activeSection: string) => React.ReactNode;
}

interface SectionMeta {
  id: string;
  label: string;
  icon: React.ReactNode;
  isWarning?: boolean;
}

const SettingsLayout: React.FC<SettingsLayoutProps> = ({ children }) => {
  const [activeSection, setActiveSection] = useState("profile");

  const sectionsMeta: SectionMeta[] = [
    { 
      id: "profile", 
      label: "Profile",
      icon: <FaUser className="w-5 h-5" />
    },
    { 
      id: "password", 
      label: "Password & Security",
      icon: <FaLock className="w-5 h-5" />
    },
    { 
      id: "withdraw", 
      label: "Withdraw",
      icon: <FaMoneyBillTransfer className="w-5 h-5" />
    },
    { 
      id: "addBank", 
      label: "Add Bank",
      icon: <FaPiggyBank className="w-5 h-5" />
    },
  ];

  // Minimize sidebar for withdraw section
  const isMinimized = activeSection === "withdraw";

  return (
    <div className="min-h-screen bg-white flex flex-col lg:flex-row">
      {/* Sidebar - Desktop */}
      <aside 
        className={`hidden lg:flex bg-white border-r px-6 py-8 flex-col sticky top-0 h-screen transition-all duration-300 ${
          isMinimized ? "w-20" : "w-64"
        }`}
      >
        <nav className="space-y-6 text-gray-700">
          {sectionsMeta.map((s) => (
            <button
              key={s.id}
              onClick={() => setActiveSection(s.id)}
              className={`flex items-center w-full text-left transition-colors group cursor-pointer ${
                activeSection === s.id
                  ? s.isWarning
                    ? "text-red-600 font-semibold"
                    : "text-purple-600 font-semibold"
                  : s.isWarning
                  ? "text-red-500 hover:text-red-600"
                  : "hover:text-purple-600"
              }`}
              title={isMinimized ? s.label : undefined}
            >
              <span className={`shrink-0 ${isMinimized ? "mx-auto" : ""}`}>
                {s.icon}
              </span>
              <span 
                className={`ml-3 transition-all duration-300 overflow-hidden ${
                  isMinimized ? "w-0 opacity-0" : "w-auto opacity-100"
                }`}
              >
                {s.label}
              </span>
            </button>
          ))}
        </nav>
      </aside>

      {/* Mobile nav */}
      <nav className="flex lg:hidden w-full overflow-x-auto border-b bg-white px-4 py-3 gap-4 text-gray-700 text-sm sm:text-base sticky top-0 z-10">
        {sectionsMeta.map((s) => (
          <button
            key={s.id}
            onClick={() => setActiveSection(s.id)}
            className={`flex items-center gap-2 whitespace-nowrap font-medium transition-colors ${
              activeSection === s.id
                ? s.isWarning
                  ? "text-red-600 border-b-2 border-red-600"
                  : "text-purple-600 border-b-2 border-purple-600"
                : s.isWarning
                ? "text-red-500 hover:text-red-600"
                : "hover:text-purple-600"
            }`}
          >
            {s.icon}
            <span>{s.label}</span>
          </button>
        ))}
      </nav>

      {/* Main Content */}
      <main className="flex-1 bg-[#F5F5F54D] px-4 sm:px-6 lg:px-10 py-8">
        {children(activeSection)}
      </main>
    </div>
  );
};

export default SettingsLayout;