import React from 'react'
import { View } from '@tarojs/components'

/**
 * 右箭头图标（CSS V 形，颜色跟随 currentColor）
 *
 * 颜色通过 className 里的 text-* 类控制（如 'text-gray-400' / 'text-white'），
 * 因为内部用 currentColor，会自动继承父元素 text color。
 *
 * @example
 * <View className='flex items-center text-gray-400'>
 *   <Text>全部订单</Text>
 *   <ArrowRight className='ml-1' />
 * </View>
 */
export interface ArrowRightProps {
  /** 颜色/间距等 className（颜色用 text-* 类，跟随 currentColor） */
  className?: string
  /** V 形边长 px，默认 6 */
  size?: number
  /** 描边粗细 px，默认 1.5 */
  thickness?: number
}

const ArrowRight: React.FC<ArrowRightProps> = ({
  className = '',
  size = 6,
  thickness = 1.5,
}) => (
  <View
    className={`inline-flex items-center justify-center ${className}`}
    style={{
      width: `${size}px`,
      height: `${size}px`,
      borderTop: `${thickness}px solid currentColor`,
      borderRight: `${thickness}px solid currentColor`,
      transform: 'rotate(45deg)',
    }}
  />
)

export default ArrowRight
