diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
index d4ff915df..0edf4acba 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
@@ -1,6 +1,60 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+
+import styles from "./parkingPrices.module.css"
+
import type { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking"
-export default async function ParkingPrices({ data }: ParkingPricesProps) {
- // TODO: Parking prices to be implemented.
- return
+export default async function ParkingPrices({
+ data,
+ currency,
+}: ParkingPricesProps) {
+ const intl = await getIntl()
+ const day = intl.formatMessage({ id: "Price per day" })
+ const night = intl.formatMessage({ id: "Price per night" })
+ const allDay = intl.formatMessage({ id: "Price per 24 hours" })
+
+ function getPeriod(period: string | undefined) {
+ switch (period) {
+ case "Day":
+ return day
+ case "Night":
+ return night
+ case "AllDay":
+ return allDay
+ }
+ }
+
+ const filterdPeriods = data?.filter((filter) => filter.period !== "Hour")
+
+ console.log("Parking log:", data)
+
+ return (
+
+ {filterdPeriods?.map((parking) => {
+ return (
+
+
+
+ {getPeriod(parking.period)}
+
+
+ {`${parking.amount} ${currency}`}
+
+
+ {parking.startTime && parking.endTime && (
+
+
+ {intl.formatMessage({ id: "From" })}
+
+
+ {parking.startTime}-{parking.endTime}
+
+
+ )}
+
+ )
+ })}
+
+ )
}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css
new file mode 100644
index 000000000..436e883ec
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css
@@ -0,0 +1,13 @@
+.wrapper {
+ display: grid;
+ row-gap: var(--Spacing-x1);
+}
+
+.period {
+ display: flex;
+ gap: var(--Spacing-x5);
+}
+
+.information {
+ flex: 1;
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
index 37c443770..a72d61255 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -1,5 +1,7 @@
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n"
import ParkingPrices from "./ParkingPrices"
@@ -21,9 +23,9 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
{parking.map((data) => (
- {`${data.type} ${data.name}`}
+ {data.type}
-