From 30cd68509cf3fb22fc815c05d6af2ddd7dd7879f Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 19 Nov 2024 14:04:47 +0100
Subject: [PATCH] feat(SW-914): add button

---
 .../Amenities/Amenity/amenity.module.css       |  5 +++++
 .../SidePeeks/Amenities/Amenity/index.tsx      | 18 ++++++++++++++++--
 .../HotelPage/SidePeeks/Amenities/index.tsx    |  6 +++---
 types/components/hotelPage/sidepeek/amenity.ts |  3 ++-
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css

diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css
new file mode 100644
index 000000000..00ab8aebe
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx
index 01b83520d..1cd8ec584 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx
@@ -1,5 +1,19 @@
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./amenity.module.css"
+
 import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity"
 
-export default function Amenity({ title }: AmenityProps) {
-  return <div>{title}</div>
+export default function Amenity({ name, buttonUrl }: AmenityProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div>{name}</div>
+      {buttonUrl && (
+        <Button theme="base" intent="primary" fullWidth asChild>
+          <Link href={buttonUrl}>{name}</Link>
+        </Button>
+      )}
+    </div>
+  )
 }
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
index 3c34d7c79..0ea04b623 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
@@ -25,14 +25,14 @@ export default async function AmenitiesSidepeek({
       <>
         <Accordion>
           {amenitiesList.map((amenity) => {
-            const iconName = mapFacilityToIconName(amenity.id)
+            const name = mapFacilityToIconName(amenity.id)
             return (
               <AccordionItem
                 key={amenity.name}
                 title={amenity.name}
-                icon={IconName[iconName]}
+                icon={IconName[name]}
               >
-                <Amenity title={amenity.name} />
+                <Amenity name={amenity.name} buttonUrl="#" />
               </AccordionItem>
             )
           })}
diff --git a/types/components/hotelPage/sidepeek/amenity.ts b/types/components/hotelPage/sidepeek/amenity.ts
index 2f4801d75..9f4756701 100644
--- a/types/components/hotelPage/sidepeek/amenity.ts
+++ b/types/components/hotelPage/sidepeek/amenity.ts
@@ -1,3 +1,4 @@
 export type AmenityProps = {
-  title: string
+  name: string
+  buttonUrl?: string
 }