'use client';
import { useAccount } from "@/lib/providers/account-provider";
import { getDisplayNameHelper, getInitialsHelper } from "@/lib/utils/account-utils";

const ProfilePersonDetailCard = () => {
  const { data, error, isLoading } = useAccount();

  if (isLoading) {
    return (
      <div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
        <p className="text-sm text-gray-500">در حال بارگذاری...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
        <p className="text-sm text-destructive">{error}</p>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
        <p className="text-sm text-gray-500">اطلاعات پروفایل یافت نشد</p>
      </div>
    );
  }

  const displayName = getDisplayNameHelper(data);
  const initials = getInitialsHelper(data);

  return (
    <div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
      <div className="flex flex-row items-center w-full">
        <div className="size-16 bg-primary-action rounded-full flex items-center justify-center text-lg font-bold text-white overflow-hidden shrink-0">
          {data.avatar ? (
            <img
              src={data.avatar}
              alt={displayName}
              className="size-full object-cover"
            />
          ) : (
            <span>{initials}</span>
          )}
        </div>
        <div className="flex flex-col mr-6 items-start">
          <p className="text-lg font-bold">{displayName}</p>

          {data.phone_number && (
            <p className="text-sm text-gray-700 my-2 font-normal" dir="ltr">
              {data.phone_number}
            </p>
          )}

          <button
            className="text-sm font-semibold text-primary-action cursor-pointer underline"
            onClick={() => alert('latter...')}
          >
            ویرایش پروفایل
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProfilePersonDetailCard;