import { Text, View } from "@tarojs/components";
import classNames from "classnames";

export default function State({
  stateMap,
  state,
  position = "absolute",
}: {
  stateMap: any;
  state: any;
  position?: "absolute" | "relative";
}) {
  // 印章组件
  const statusInfo = stateMap[state];

  return (
    statusInfo && (
      <View
        className={classNames(
          "flex items-center justify-center rounded-full px-3 py-1 shadow-sm",
          {
            "absolute top-4 right-4": position === "absolute",
            relative: position === "relative",
          },
        )}
        style={{
          backgroundColor: statusInfo.bgColor,
          boxShadow: `0 0 0 1px ${statusInfo.color}20, 0 1px 3px 0 ${statusInfo.color}30`,
        }}
      >
        <Text
          className="text-xs font-medium"
          style={{ color: statusInfo.color }}
        >
          {statusInfo.label}
        </Text>
      </View>
    )
  );
}
