import React from 'react';
import { View, Text } from '@tarojs/components';
import './index.scss';

interface PointsCardProps {
  balance: number;
  consecutiveDays: number;
  checkedIn: boolean;
  checkinLoading?: boolean;
  onCheckin?: () => void;
}

const PointsCard: React.FC<PointsCardProps> = ({
  balance,
  consecutiveDays,
  checkedIn,
  checkinLoading = false,
  onCheckin,
}) => {
  return (
    <View className='points-card'>
      {/* 装饰圆 */}
      <View className='points-card__deco points-card__deco--1' />
      <View className='points-card__deco points-card__deco--2' />
      <View className='points-card__deco points-card__deco--3' />

      <View className='points-card__body'>
        <View className='points-card__left'>
          <Text className='points-card__label'>我的积分</Text>
          <Text className='points-card__balance'>{balance.toLocaleString()}</Text>
          {consecutiveDays > 0 && (
            <Text className='points-card__streak'>
              已连续签到 {consecutiveDays} 天
            </Text>
          )}
        </View>
        <View
          className={`points-card__checkin ${checkedIn ? 'points-card__checkin--done' : ''}`}
          onClick={() => !checkedIn && !checkinLoading && onCheckin?.()}
        >
          <Text className='points-card__checkin-text'>
            {checkinLoading ? '...' : checkedIn ? '已签到' : '签到'}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default React.memo(PointsCard);