'use client';

import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings';

export default function UserPasswordSecurityPage() {
  const handleSave = (data: { currentPassword: string; newPassword: string }) => {
    console.log('Updating user password:', data);
  };

  return (
    <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
      <div className="flex flex-col lg:flex-row gap-6">
        {/* Left Sidebar */}
        <SettingsSidebar basePath="/user/settings" />

        {/* Main Content */}
        <div className="flex-1">
          {/* Header Card */}
          <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
            <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
              Password Security
            </h1>
          </div>

          <PasswordSecurityForm onSave={handleSave} />
        </div>
      </div>
    </div>
  );
}