import { useNavigate } from "react-router-dom";

export default function Arrow({
  link,
  radius = "20",
  cx = "64",
  cy = "20",
  width = "84",
  height = "40",
  colorCircle = "#B78A61",
}) {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => navigate(link)}
      className="group border-none bg-transparent cursor-pointer"
    >
      <svg
        width={width}
        height={height}
        viewBox={`0 0 ${width} ${height}`}
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx={cx}
          cy={cy}
          r={radius}
          fill={colorCircle}
          className="transition-colors duration-200 group-hover:fill-[#a85656]"
        />
        <path d="M0 20.5H64" stroke="white" strokeWidth="2" />
        <path
          d="M54 9L64.0858 19.0858C64.8668 19.8668 64.8668 21.1332 64.0858 21.9142L54 32"
          stroke="white"
          strokeWidth="2"
        />
      </svg>
    </button>
  );
}
