import React from 'react';

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

const LeftArrow: React.FC<LeftArrowProps> = ({ themeColor, onClick, className = '' }) => {
  return (
    <button
      className={`size-20 relative cursor-pointer hover:opacity-80 transition-opacity ${className}`}
      onClick={onClick}
    >
      {/* 背景矩形 */}
      <div className="left-0 top-0 absolute">
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M0 0V80H80V0H0Z"
            fill="black"
            fillOpacity="0.0117647"
          />
        </svg>
      </div>

      {/* 第一个三角形 */}
      <div className="left-[15.47px] top-[16.70px] absolute">
        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z"
            fill={`url(#paint0_linear_left_arrow)`}
            stroke={`url(#paint1_linear_left_arrow)`}
            strokeWidth="1.14286"
          />
          <defs>
            <linearGradient
              id="paint0_linear_left_arrow"
              x1="15.4722"
              y1="64.528"
              x2="39.3844"
              y2="64.528"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor={themeColor} />
              <stop offset="1" stopColor="#7C5101" />
            </linearGradient>
            <linearGradient
              id="paint1_linear_left_arrow"
              x1="15.4722"
              y1="64.528"
              x2="39.3844"
              y2="64.528"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor={themeColor} />
              <stop offset="1" stopColor="#7C5101" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      {/* 第二个三角形 */}
      <div className="left-[39.38px] top-[16.70px] absolute">
        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z"
            fill={themeColor}
            stroke={`url(#paint2_linear_left_arrow)`}
            strokeWidth="1.14286"
          />
          <defs>
            <linearGradient
              id="paint2_linear_left_arrow"
              x1="39.3843"
              y1="64.528"
              x2="63.2965"
              y2="64.528"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor={themeColor} />
              <stop offset="1" stopColor="#7C5101" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </button>
  );
};

export default LeftArrow;