"use client";

import React from "react";
import UserAddressCard from "../../components/UserAddressCard";
import UserAccountCard from "../../components/UserAccountInfo";
import UserInfoCard from "../../components/UserInfoCard";
import { useProfile } from "@/modules/profileModule/hook/useProfile";
import { User } from "@/types/auth";

export default function UserEditableSection({ initialProfile }: { initialProfile: User | null }) {
  const { profile, isUpdating, error, saveSectionChanges } = useProfile({ initialProfile });

  const handleUserInfoSave = (updatedInfo: {
    firstname: string;
    lastname: string;
    profile: {
      basic_information?: {
        date_of_birth?: string;
        place_of_birth?: string;
      };
    };
  }) => {
    return saveSectionChanges("personal", updatedInfo);
  };

  const handleAddressSave = (updatedAddress: {
    profile: {
      address: any;
    };
  }) => {
    return saveSectionChanges("address", updatedAddress);
  };

  if (!profile) return null;

  return (
    <div className="space-y-6">
      <UserInfoCard user={profile} onSave={handleUserInfoSave} isSaving={isUpdating} />
      <UserAccountCard user={profile} />
      <UserAddressCard user={profile} onSave={handleAddressSave} isSaving={isUpdating} />
      {error && <p className="text-sm text-red-600">Error: {error}</p>}
    </div>
  );
}