"use client";

interface NewsroomViewMoreProps {
  hasNextPage: boolean;
  loadingMore: boolean;
  onViewMore: () => void;
}

export function NewsroomViewMore({
  hasNextPage,
  loadingMore,
  onViewMore,
}: NewsroomViewMoreProps) {
  if (!hasNextPage) return null;

  return (
    <div className="mt-12 mb-6 flex w-full justify-center sm:mt-14 sm:mb-8">
      <button
        type="button"
        onClick={onViewMore}
        disabled={loadingMore}
        className="group relative inline-flex items-center gap-3 overflow-hidden rounded-full border border-accent/20 bg-white px-8 py-3.5 text-sm font-semibold text-accent shadow-sm transition-all duration-300 hover:border-accent hover:bg-accent hover:text-white hover:shadow-md disabled:pointer-events-none disabled:opacity-60"
      >
        {loadingMore ? (
          <>
            <svg
              className="h-4 w-4 animate-spin text-current"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              />
            </svg>
            <span>Loading More...</span>
          </>
        ) : (
          <>
            <span>View More</span>
            <svg
              className="h-4 w-4 transition-transform duration-300 group-hover:translate-y-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2.2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </>
        )}
      </button>
    </div>
  );
}