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

/* ═══════════════════════════════════════════════════════════════
   ARROW LINK
   ═══════════════════════════════════════════════════════════════ */

type ArrowLinkProps = {
  to: string;
  label: string;
  color: string;
  /** Tailwind size classes for the circle. */
  size?: string;
};

export default function ArrowLink({ to, label, color, size = "h-9 w-9" }: ArrowLinkProps) {
  return (
    <Link
      to={to}
      aria-label={label}
      title={label}
      className={`${size} shrink-0 rounded-full flex items-center justify-center transition-transform duration-200 hover:scale-110`}
      style={{ border: `1px solid ${color}`, color }}
    >
      <svg
        viewBox="0 0 24 24"
        className="h-4 w-4"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M5 12h14M13 6l6 6-6 6" />
      </svg>
    </Link>
  );
}