import { View, Image } from "@tarojs/components";
import style from "./index.module.less";
import IconArrowThin from "@/components/icon/icon-arrow-thin";
import IconArrowRight24 from "@/components/icon/IconArrowRight24";

interface Props {
  arrow?: boolean;
  children?: JSX.Element[] | JSX.Element;
  leftRenderer?: ()=> JSX.Element[] | JSX.Element; 
  rightRenderer?: () => JSX.Element[] | JSX.Element;
  className?: string,
  onClick?: (e?:any) => void;
  onLongPress?: ()=> void;
  underline?: boolean;
}
// todo: 改了好几版，需要根据新 ui 重新规划组件
export default ({
  arrow = false,
  underline = false,
  className = '',
  leftRenderer,
  rightRenderer,
  onClick,
  onLongPress,
  children,
}: Props) => {
  const handleClick = (e:any) => {
    onClick && onClick(e);
  };
  const handleLongPress = () => {
    onLongPress && onLongPress();
  };
  return (
    <View
      className={`flex w-full bg-white gap-12 ${className}`}
      onClick={handleClick}
      onLongPress={handleLongPress}
    >
      {leftRenderer && <View className="flex items-center justify-center">{leftRenderer()}</View>}
      <View className={`${
        underline ? style.underline : ""
      } flex flex-1 text-16 text-black leading-24  font-medium relative`}>
        <View className="flex-1">
          {children}
        </View>
        {rightRenderer && rightRenderer()}
        {/* {arrow && (
          <View className=''>
            <IconArrowThin/>
          </View>
        )} */}
        {arrow && (
          <View className='flex-center pr-8'>
            <IconArrowRight24 />
          </View>
        )}
        
      </View>
    </View>
  );
};
