import { View } from "@tarojs/components";
import IconArrowThin from "@/components/icon/icon-arrow-thin";
export interface IndexProps {
  text: string;
  unitText: string;
  value: number;
  onClick?: () => void;
  arrow?: boolean;
}

export default function Index({
  text,
  unitText,
  value,
  onClick,
  arrow,
}: IndexProps) {
  const handleClick = () => {
    onClick?.();
  };
  return (
    <View
      className="flex p-12 rounded-8 bg-gray-3 text-black"
      onClick={handleClick}
    >
      <View className="flex-1">
        <View className="flex items-center mb-8 font-medium">{text}</View>
        <View className="flex items-center">
          <View className="flex items-end flex-1 gap-2">
            <View className="text-22 font-bold leading-22">{value}</View>
            <View className="text-10 font-medium leading-14">{unitText}</View>
          </View>
        </View>
      </View>
      {arrow && (
        <View className="flex-center">
          <IconArrowThin />
        </View>
      )}
    </View>
  );
}
