"use client";

import React from "react";

interface ArrowButtonProps {
  direction?: "left" | "right" | "up"; // default is left
  onClick?: () => void;
  size?: number;
  color?: string;
  className?: string;
}

const ArrowButton: React.FC<ArrowButtonProps> = ({
  direction = "left",
  onClick,
  size = 44,
  color = "#0097DC",
  className = "",
}) => {
  const rotationClass =
    direction === "right"
      ? "rotate-180"
      : direction === "up"
      ? "-rotate-90"
      : "";

  return (
    <button
      onClick={onClick}
      aria-label={`Scroll ${direction}`}
      className={` md:flex flex items-center justify-center rounded-full border-1 aspect-square flex-none transition-all duration-200 hover:opacity-90 hover:scale-105 ${className}`}
      style={{
        width: size,
        height: size,
        borderColor: color,
        color,
      }}
    >
      <svg
        width={size * 0.7}
        height={size * 0.7}
        viewBox="0 0 40 40"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={`${rotationClass} transition-transform`}
      >
        <path
          d="M7.63867 20.557C7.51279 20.4312 7.51279 20.2271 7.63867 20.1012L9.69011 18.0497C9.81599 17.9238 10.0201 17.9238 10.146 18.0497C10.2719 18.1756 10.2719 18.3797 10.146 18.5056L8.32248 20.3291L10.146 22.1526C10.2719 22.2785 10.2719 22.4826 10.146 22.6085C10.0201 22.7344 9.81599 22.7344 9.69011 22.6085L7.63867 20.557ZM32.1289 20.3291L32.1289 20.6515L7.86661 20.6515L7.86661 20.3291L7.86661 20.0068L32.1289 20.0067L32.1289 20.3291Z"
          fill="currentColor"
        />
      </svg>
    </button>
  );
};

export default ArrowButton;