feat(SW-66, SW-348): search functionality and ui

components/Forms/BookingWidget/FormContent/index.tsx

@@ -3,23 +3,25 @@ import { useIntl } from "react-intl"
 
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import Search from "./Search"
+
 import styles from "./formContent.module.css"
 
-export default function FormContent() {
-  const intl = useIntl()
+import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
 
-  const where = intl.formatMessage({ id: "Where to" })
+export default function FormContent({
+  locations,
+}: BookingWidgetFormContentProps) {
+  const intl = useIntl()
   const when = intl.formatMessage({ id: "When" })
   const rooms = intl.formatMessage({ id: "Rooms & Guests" })
   const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
   const bonus = intl.formatMessage({ id: "Use bonus cheque" })
   const reward = intl.formatMessage({ id: "Book reward night" })
-
   return (
     <div className={styles.input}>
       <div className={styles.where}>
-        <Caption color="red">{where}</Caption>
-        <input type="text" placeholder={where} />
+        <Search locations={locations} />
       </div>
       <div className={styles.when}>
         <Caption color="red" textTransform="bold">