'use client'

import CrushcoinBackground from './components/CrushcoinBackground'
import { GradientDivider } from '@/components/ui/gradient-divider'
import { useGetSevenDaysSignList } from '@/hooks/useHome'
import CheckInGrid from './components/CheckInGrid'

const CrushCoinPage = () => {
  const { data: signListData } = useGetSevenDaysSignList()

  // 计算连续签到天数
  const consecutiveDays = signListData?.continuousDays || 0

  return (
    <div className="px-16">
      <CrushcoinBackground />
      <div className="relative z-1">
        <h1 className="txt-display-xl mt-14 text-center">Daily Free CrushCoins</h1>
        <div className="txt-title-m mt-10 py-2 text-center">
          {/* You have checked in for {consecutiveDays} Consecutive days Consecutive days */}
          You’ve checked in for {consecutiveDays} consecutive days.
        </div>
        {/* 渐变分割线 */}
        <GradientDivider />

        {/* 签到网格 */}
        <div className="mx-auto mt-8 max-w-[752px]">
          <CheckInGrid />

          <div className="txt-body-m text-center text-txt-primary-normal mt-4">
            <p>Diamonds can be used to pay for chat services and unlock other items. </p>
            <p>
              If you miss a check-in, the check-in count will reset and start again from day one.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CrushCoinPage
