import DashboardLayout from "@/components/DashboardLayout";
import ChangePasswordForm from "@/components/profile/ChangePasswordForm";

export default function ChangePasswordPage() {
  return (
    <DashboardLayout
      title="تغيير كلمة المرور"
      subtitle="حافظ على أمان حسابك بكلمة مرور قوية"
    >
      <div className="max-w-2xl mx-auto">
        <div className="bg-[#1E2128] rounded-2xl p-8">
          <div className="flex items-center gap-4 mb-8">
            <div className="text-right">
              <h2 className="text-white font-bold text-lg">
                تغيير كلمة المرور
              </h2>
              <p className="text-gray-400 text-xs">آخر تغيير منذ 3 أشهر</p>
            </div>
            <div className="w-12 h-12 bg-[#FCD704]/15 rounded-xl flex items-center justify-center">
              <div className="w-12 h-12 flex items-center justify-center">
                <i className="ri-shield-keyhole-line text-[#FCD704] text-2xl" />
              </div>
            </div>
          </div>
          <ChangePasswordForm />
        </div>
      </div>
    </DashboardLayout>
  );
}