"use client";

const ProfileBannerSkeleton = () => {
  return (
    <section className="relative w-full overflow-hidden animate-pulse">
      {/* Banner Skeleton */}
      <div className="relative w-full h-[200px] bg-gray-300">
        {/* Back Button */}
        <div className="absolute top-6 left-6 z-10">
          <div className="bg-black text-white rounded-md h-8 w-20" />
        </div>

        {/* Favorite Button */}
        <div className="absolute top-6 right-6 z-10">
          <div className="bg-white rounded-full h-8 w-36 border border-gray-300" />
        </div>

      </div>

      {/* Bottom Info and Actions */}
      <div className="w-full flex justify-end">
        <div className="flex items-center justify-between px-6 pt-14 w-[70%] pb-4">
          <div className="w-20 h-4 bg-gray-300 rounded" />

          <div className="flex items-center gap-3">
            <div className="w-[120px] h-8 bg-red-300 rounded-full" />
            {/* Optional: block button skeleton */}
            <div className="w-[100px] h-8 bg-red-200 rounded-full" />
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProfileBannerSkeleton;
