import { View } from "@tarojs/components";
import style from "./index.module.less";
import { EWidgeRowLayout } from "@/types/index";
import { TSocialMediaItem } from "@/types/index";
import React from "react";


interface Props {
  children?: React.ReactChild | React.ReactChild[];
  type?: React.ReactElement; // 原传递的 type string 值改成 ReactElement 不再使用 iconfont
  editMode?: boolean;
  className?: string; // 用于社交媒体 icon 显示
  mediaItem?: TSocialMediaItem;
  layout?: EWidgeRowLayout; // center|simple|default|''
  rightArrow?: boolean;
  data?: Record<string, any>;
  onClick?: (e: any) => void;
  setShow?: (mediaItem: TSocialMediaItem, link: string) => void;
}

const Index: React.FC<Props> = ({
  children,
  type,
  mediaItem,
  layout = "",
  className = "",
  editMode,
  data,
  onClick,
  setShow,
}) => {
  
  const center =
    layout === "center" || layout === "simple" ? "justify-center" : "";
  

  const handleCopy = (e: any) => {
    if (mediaItem) {
      e.stopPropagation();
      setShow && setShow(mediaItem, data?.link ?? data?.value)
      return;
    }
    onClick && onClick(e);
  };

  const handleClick = (e: any) => {
    onClick && onClick(e);
  };
  if (!editMode) {
    return (
      <View
        className={`flex items-center gap-8 px-16`}
        onClick={(e) => handleCopy(e)}
      >
        <View className={`${className} ${style.iconBox}`}>{type}</View>
        <View className={`flex flex-1 ${center ? "justify-center" : ""}`}>
          {children}
        </View>
        <View className={style.copyText}></View>
      </View>
    );
  }
  return (
    <View className={`flex items-center gap-8 px-16`} onClick={handleClick}>
      <View className={`${className} ${style.iconBox}`}>
        {type}
      </View>
      <View className={`flex flex-1 ${center ? "justify-center" : ""}`}>
        {children}
      </View>
      <View className={style.copyText} onClick={(e) => handleCopy(e)}>
          
        </View>
    </View>
  );
};

export default Index;
