// // src/pages/General/Settings.jsx
import { FaUsers, FaArrowRight, FaCubes, FaThLarge } from "react-icons/fa";
import { useNavigate } from "react-router-dom";
import { FaBed } from "react-icons/fa";
import { useContext } from "react";
import { langContext } from "../../context/LenguageContext";

export default function Settings() {
  const navigate = useNavigate();
  const { lang } = useContext(langContext);

  return (
    <div className="properties-container">
      <div className="min-h-screen bg-gray-100 py-12 px-8 md:px-16 lg:px-24">
        <div className="flex border-l-4 border-red-700 pl-6">
          <div className="w-full">
            <h1 className="text-3xl font-bold text-gray-800 mb-12">General</h1>

            {/* USERS */}
            <div className="mb-10">
              <h2 className="text-lg font-semibold text-gray-700 mb-3">{lang === "en" ? "Users" : "Usuarios"}</h2>
              <div className="flex items-center justify-between bg-white shadow-md p-5 rounded-lg">
                <div className="flex items-center text-sm text-gray-600">
                  <FaUsers className="text-red-700 mr-3 text-base" />
                  4 {lang === "en" ? "Active users" : "Usuarios activos"}
                </div>
                <button
                  onClick={() => navigate("/app/manage-users")}
                  className="flex items-center text-red-700 font-medium hover:underline"
                >
                  {lang === "en" ? "Manage users" : "Gestionar usuarios"}
                  <FaArrowRight className="ml-2" />
                </button>
              </div>
            </div>

            {/* UNITS */}
            <div className="mb-10">
              <h2 className="text-lg font-semibold text-gray-700 mb-3">{lang === "en" ? "Units" : "Unidades"}</h2>
              <div className="flex items-center justify-between bg-white shadow-md p-5 rounded-lg">
                <div className="flex items-center text-sm text-gray-600">
                  <FaCubes className="text-orange-600 mr-3 text-base" />
                  {lang === "en" ? "Manage all unit data" : "Gestionar todos los datos de unidades"}
                </div>
                <button
                  onClick={() => navigate("/app/manage-units")}
                  className="flex items-center text-orange-600 font-medium hover:underline"
                >
                  {lang === "en" ? "Manage units" : "Gestionar unidades"}
                  <FaArrowRight className="ml-2" />
                </button>
              </div>
            </div>

            {/* AREAS */}
            <div className="mb-10">
              <h2 className="text-lg font-semibold text-gray-700 mb-3">{lang === "en" ? "Areas" : "Áreas"}</h2>
              <div className="flex items-center justify-between bg-white shadow-md p-5 rounded-lg">
                <div className="flex items-center text-sm text-gray-600">
                  <FaThLarge className="text-pink-700 mr-3 text-base" />
                  {lang === "en" ? "Customize working areas" : "Personalizar áreas de trabajo"}
                </div>
                <button
                  onClick={() => navigate("/app/manage-areas")}
                  className="flex items-center text-pink-700 font-medium hover:underline"
                >
                  {lang === "en" ? "Manage areas" : "Gestionar áreas"}
                  <FaArrowRight className="ml-2" />
                </button>
              </div>
            </div>

            {/* Rooms card */}
            <div className="settings-card">
              <h2 className="text-lg font-semibold text-gray-700 mb-3">{lang === "en" ? "Rooms" : "Habitaciones"}</h2>
              <div className="card-icon">
                <FaBed size={30} />
              </div>
              <div className="card-title">15 {lang === "en" ? "active rooms" : "habitaciones activas"}</div>
              <div className="card-footer">
                <button
                  className="card-button"
                  onClick={() => navigate("/app/settings/room-management")}
                >
                  {lang === "en" ? "Manage rooms →" : "Gestionar habitaciones →"}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// import { FaUsers, FaArrowRight, FaCubes, FaThLarge } from 'react-icons/fa';
// import { useNavigate } from 'react-router-dom';

// export default function Settings() {
//   const navigate = useNavigate();

//   return (
//     <div className="p-10 bg-gray-100 min-h-screen">
//       {/* Título principal */}
//       <h1 className="text-3xl font-bold text-gray-800 mb-10">General</h1>

//       {/* Sección: Users */}
//       <div className="mb-12">
//         <h2 className="text-xl font-semibold text-gray-700 mb-3">Users</h2>
//         <div className="flex items-center justify-between bg-white p-4 rounded shadow-sm">
//           <div className="flex items-center text-sm text-gray-600">
//             <FaUsers className="text-red-700 mr-2" />
//             4 Active users
//           </div>
//           <button
//             onClick={() => navigate("/app/manage-users")}
//             className="flex items-center text-red-700 font-medium hover:underline"
//           >
//             Manage users
//             <FaArrowRight className="ml-2" />
//           </button>
//         </div>
//       </div>

//       {/* Sección: Units */}
//       <div className="mb-12">
//         <h2 className="text-xl font-semibold text-gray-700 mb-3">Units</h2>
//         <div className="flex items-center justify-between bg-white p-4 rounded shadow-sm">
//           <div className="flex items-center text-sm text-gray-600">
//             <FaCubes className="text-orange-600 mr-2" />
//             Manage all unit data
//           </div>
//           <button
//             onClick={() => navigate("/app/manage-units")}
//             className="flex items-center text-orange-600 font-medium hover:underline"
//           >
//             Manage units
//             <FaArrowRight className="ml-2" />
//           </button>
//         </div>
//       </div>

//       {/* Sección: Areas */}
//       <div className="mb-12">
//         <h2 className="text-xl font-semibold text-gray-700 mb-3">Areas</h2>
//         <div className="flex items-center justify-between bg-white p-4 rounded shadow-sm">
//           <div className="flex items-center text-sm text-gray-600">
//             <FaThLarge className="text-pink-700 mr-2" />
//             Customize working areas
//           </div>
//           <button
//             onClick={() => navigate("/app/manage-areas")}
//             className="flex items-center text-pink-700 font-medium hover:underline"
//           >
//             Manage areas
//             <FaArrowRight className="ml-2" />
//           </button>
//         </div>
//       </div>
//     </div>
//   );
// }


// import { FaUsers, FaArrowRight, FaCubes, FaThLarge } from 'react-icons/fa';
// import { useNavigate } from 'react-router-dom';

// const Settings = () => {
//   const navigate = useNavigate();

//   return (
//     <div className="p-6 bg-gray-100 min-h-screen">
//       <h1 className="text-2xl font-bold text-gray-700 mb-6">General</h1>

//       <div className="mb-8">
//         <h2 className="text-lg font-semibold text-gray-600 mb-4">Users</h2>
//         <div className="flex items-center space-x-6">
//           <div className="flex items-center text-sm text-gray-500">
//             <FaUsers className="text-red-700 mr-2" />
//             4 Active users
//           </div>
//           <button
//             className="flex items-center text-red-700 font-medium hover:underline"
//             onClick={() => navigate('/app/manage-users')}
//           >
//             <FaArrowRight className="mr-1" />
//             Manage users
//           </button>
//         </div>
//       </div>

//       <div className="mb-8">
//         <h2 className="text-lg font-semibold text-gray-600 mb-4">Units</h2>
//         <button
//           className="flex items-center text-orange-700 font-medium hover:underline"
//           onClick={() => navigate('/app/manage-units')}
//         >
//           <FaCubes className="mr-2" />
//           Manage units
//         </button>
//       </div>

//       <div>
//         <h2 className="text-lg font-semibold text-gray-600 mb-4">Areas</h2>
//         <button
//           className="flex items-center text-pink-700 font-medium hover:underline"
//           onClick={() => navigate('/app/manage-areas')}
//         >
//           <FaThLarge className="mr-2" />
//           Manage areas
//         </button>
//       </div>
//     </div>
//   );
// };

// export default Settings;
