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

interface CheckinCalendarProps {
  consecutiveDays: number;
  earnedPoints?: number;
  onClose?: () => void;
}

const DAYS = ['一', '二', '三', '四', '五', '六', '日'];

const CheckinCalendar: React.FC<CheckinCalendarProps> = ({
  consecutiveDays,
}) => {
  const daysUntilReward = 7 - consecutiveDays;

  return (
    <View className='checkin-calendar'>
      {DAYS.map((d, i) => {
        const isChecked = i < consecutiveDays;
        const isToday = i === consecutiveDays - 1;
        return (
          <View key={i} className='checkin-calendar__day'>
            <View
              className={`checkin-calendar__dot ${
                isChecked
                  ? isToday
                    ? 'checkin-calendar__dot--today'
                    : 'checkin-calendar__dot--checked'
                  : 'checkin-calendar__dot--empty'
              }`}
            >
              {isChecked && <Text className='checkin-calendar__check'>&#10003;</Text>}
            </View>
            <Text className={`checkin-calendar__label ${isToday ? 'checkin-calendar__label--today' : ''}`}>
              周{d}
            </Text>
          </View>
        );
      })}
      {daysUntilReward > 0 && (
        <View className='checkin-calendar__tip'>
          <Text className='checkin-calendar__tip-text'>
            再坚持 {daysUntilReward} 天，连续 7 天签到额外奖励 50 积分
          </Text>
        </View>
      )}
    </View>
  );
};

export default React.memo(CheckinCalendar);