import LotteryHeader from "@/components/lottery/LotteryHeader";
import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
import { getTossData } from "@/api/queries";
import { getLotteryStatus } from "@/lib/actions";
import LotteryWinners from "../lottery/LotteryWinners";

const TossPage = async ({
  type,
  id,
}: {
  type: "bije" | "cekilis";
  id: string;
}) => {
  const tossData = await getTossData({ type, id });

  const status = await getLotteryStatus(
    tossData?.data?.start_time,
    tossData?.data?.end_time
  );

  return (
    <>
      {tossData?.data ? (
        <div className="flex flex-col font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] ms:pb-[128px] pb-[80px] text-lightOnSurface">
          {tossData && (
            <div className="flex flex-col sm:gap-[64px] gap-[40px] pb-[40px]">
              <LotteryHeader
                title={tossData.data.title}
                description={tossData.data.description}
                image={tossData.data.image}
                smsCode={tossData.data.sms_code}
                startDate={tossData.data.start_time}
              />

              {status === "Upcoming" && (
                <div className="container">
                  <LotteryCountDown
                    lotteryStatus={status}
                    endDate={tossData.data.end_time}
                    startDate={tossData.data.start_time}
                  />
                </div>
              )}
            </div>
          )}

          <LotteryRulesSection show={false} data={tossData} />

          <div className="flex flex-col gap-10 mt-[40px]">
            <LotteryWinners data={tossData} lotteryStatus={status} />
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] ms:pb-[128px] pb-[80px] text-lightOnSurface">
          <h1 className="text-[22px]">{tossData?.errorMessage}</h1>
        </div>
      )}
    </>
  );
};

export default TossPage;