import React from 'react';

interface RightArrowProps {
  themeColor: string;
  onClick?: () => void;
  className?: string;
}

const RightArrow: React.FC<RightArrowProps> = ({ themeColor, onClick, className = '' }) => {
  return (
    <button
      className={`size-20 cursor-pointer hover:opacity-80 transition-opacity ${className}`}
      onClick={onClick}
    >
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M80 0V80H0V0H80Z" fill="black" fill-opacity="0.0117647"/>
        <path d="M41.7227 18.6196L44.5527 29.1392C46.575 36.6563 46.575 44.5751 44.5527 52.0923L41.7227 62.6128L63.7187 40.6157L41.7227 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
        <path d="M17.8105 18.6196L20.6406 29.1392C22.6629 36.6563 22.6629 44.5751 20.6406 52.0923L17.8105 62.6128L39.8066 40.6157L17.8105 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
      </svg>
    </button>
  );
};

export default RightArrow;