'use client';

import CrushcoinBackground from './components/CrushcoinBackground';
import { GradientDivider } from '@/components/ui/gradient-divider';
import CheckInGrid from './components/CheckInGrid';
import { IconButton } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import { useSignIn } from '@/hooks/services/signin';
import { useTranslations } from 'next-intl';

const CrushCoinPage = () => {
  const { signInListData } = useSignIn();
  const router = useRouter();
  const t = useTranslations('crushcoin');

  return (
    <div className="px-4 sm:px-16">
      <CrushcoinBackground />
      <div className="relative max-w-[752px] flex flex-col mx-auto">
        <IconButton
          variant="ghost"
          size="large"
          onClick={() => router.back()}
          className="absolute top-1 left-0 z-10"
        >
          <i className="iconfont icon-arrow-left !text-[16px]" />
        </IconButton>
        <h1 className="txt-display-m sm:txt-display-xl mt-14 text-center">{t('title')}</h1>
        <div className="txt-title-xs sm:txt-title-m mt-10 py-2 text-center">
          {t('consecutiveDays', { days: signInListData?.continuousDays || '-' })}
        </div>
        {/* 渐变分割线 */}
        <GradientDivider />

        {/* 签到网格 */}
        <div className="mt-8">
          <CheckInGrid />

          <div className="txt-body-m text-center text-txt-primary-normal mt-4">
            <p>{t('description1')}</p>
            <p>{t('description2')}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CrushCoinPage;
