refactor(SW-194): use design system button

components/Blocks/Accordion/index.tsx

@@ -6,23 +6,26 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-
-import { ShowMoreButton } from "../../ContentType/HotelPage/ShowMoreButton"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./accordion.module.css"
 
 import type { AccordionProps } from "@/types/components/blocks/Accordion"
 
 export default function AccordionSection({ accordion, title }: AccordionProps) {
-  const [allItemsVisible, setAllItemsVisible] = useState(false)
-  function handleToggleShowMore() {
-    setAllItemsVisible((previousState) => !previousState)
+  const initialPageSize = 5
+  const [pageSize, setPageSize] = useState(initialPageSize)
+  const showMoreVisible = accordion.length > initialPageSize
+  const showLessVisible = pageSize >= accordion.length
+
+  function handleShowMore() {
+    setPageSize(showLessVisible ? initialPageSize : accordion.length)
   }
 
   function getClassName(idx: number): string {
-    if (!allItemsVisible && idx > 4) {
+    if (showMoreVisible && idx > pageSize - 1) {
       return styles.hiddenItem
-    } else if (!allItemsVisible && idx == 4) {
+    } else if (showMoreVisible && idx == pageSize - 1) {
       return styles.lastItem
     }
     return ""
@@ -34,11 +37,12 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
       <Accordion theme={"light"} variant={"card"}>
         {accordion.map((acc, idx: number) => (
           <AccordionItem
-            key={acc.question + idx}
+            key={`${acc.question}-${idx}`}
             title={acc.question}
             className={getClassName(idx)}
           >
             <JsonToHtml
+              key={`${acc.question}-${idx}`}
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}
             />
@@ -46,12 +50,12 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
         ))}
       </Accordion>
 
-      {accordion.length > 5 ? (
+      {showMoreVisible ? (
         <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={showLessVisible}
           textShowMore="See all FAQ"
           textShowLess="See less FAQ"
-          allItemsVisible={allItemsVisible}
-          handleToggleShowMore={handleToggleShowMore}
         />
       ) : null}
     </SectionContainer>