"use client"

import { useState } from "react"

import ListContainer from "../ListContainer"
import { Card } from "./Card"
import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
import { SeeAllCard } from "./SeeAllCard"

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

import type { PreviousStaysClientProps } from "@/types/components/myPages/stays/previous"

const MAX_VISIBLE_STAYS = 5

export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)

  const stays = initialPreviousStays.data
  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
  const hasMoreStays = stays.length >= INITIAL_STAYS_FETCH_LIMIT

  return (
    <ListContainer>
      <div className={styles.grid}>
        {visibleStays.map((stay) => (
          <Card key={stay.attributes.confirmationNumber} stay={stay} />
        ))}
        {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
      </div>
      <PreviousStaysSidePeek
        isOpen={isSidePeekOpen}
        onClose={() => setIsSidePeekOpen(false)}
      />
    </ListContainer>
  )
}