"use client"

import { useState } from "react"

import Image from "@/components/Image"
import Pagination from "@/components/MyPages/Pagination"
import Grids from "@/components/TempDesignSystem/Grids"
import Title from "@/components/TempDesignSystem/Text/Title"

import Redeem from "./Redeem"

import styles from "./current.module.css"

import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"

export default function ClientCurrentRewards({
  rewards,
  pageSize,
  showRedeem,
}: CurrentRewardsClientProps) {
  const [currentPage, setCurrentPage] = useState(1)

  const totalPages = Math.ceil(rewards.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const endIndex = startIndex + pageSize
  const currentRewards = rewards.slice(startIndex, endIndex)

  return (
    <div className={styles.container}>
      <Grids.Stackable>
        {currentRewards.map((reward, idx) => (
          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
            <div className={styles.content}>
              <Image
                src="/_static/img/loyalty-award.png"
                width={113}
                height={125}
                alt={reward.label || ""}
              />
              <Title
                as="h4"
                level="h3"
                textAlign="center"
                textTransform="regular"
              >
                {reward.label}
              </Title>
            </div>
            {showRedeem && (
              <div className={styles.btnContainer}>
                <Redeem reward={reward} />
              </div>
            )}
          </article>
        ))}
      </Grids.Stackable>
      {totalPages > 1 && (
        <Pagination
          pageCount={totalPages}
          currentPage={currentPage}
          handlePageChange={setCurrentPage}
        />
      )}
    </div>
  )
}