'use client';

import { useLotteryAuth } from '@/store/useLotteryAuth';
import ProtectedRoute from '@/components/lottery/auth/ProtectedRoute';
import { useLottery } from '@/lib/hooks/useLottery';
import { LOTTERY_CONFIG } from '@/constants/lottery';
import LotteryHeader from '@/components/lottery/LotteryHeader';
import LotteryCounter from '@/components/lottery/RollingCounter/RollingCounter';

import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection';
import LotteryRulesSection from '@/components/lottery/rules/LotteryRulesSection';
import RollingCounter from '@/components/lottery/RollingCounter/RollingCounter';

const LotteryPage = () => {
  const { lotteryData } = useLotteryAuth();
  const { status, currentNumber } = useLottery(LOTTERY_CONFIG.START_DATE, LOTTERY_CONFIG.END_DATE);

  return (
    <ProtectedRoute>
      <div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
        <RollingCounter numberString={'00-00-00-00-00'} />

        {lotteryData && (
          <LotteryHeader
            title={lotteryData.data.title}
            description={lotteryData.data.description}
            image={lotteryData.data.image}
            smsCode={lotteryData.data.sms_code}
          />
        )}

        <LotteryRulesSection />

        {(status === 'ended' || status === 'started') && <LotteryWinnersSection />}
      </div>
    </ProtectedRoute>
  );
};

export default LotteryPage;