"use client"
import { useRouter, useSearchParams } from "next/navigation"

import SelectionCard from "../SelectionCard"

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

import type { BreakfastSelectionProps } from "@/types/components/hotelReservation/selectRate/section"

export default function BreakfastSelection({
  alternatives,
  nextPath,
}: BreakfastSelectionProps) {
  const router = useRouter()
  const searchParams = useSearchParams()

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const queryParams = new URLSearchParams(searchParams)
    queryParams.set("breakfast", e.currentTarget.breakfast?.value)
    router.push(`${nextPath}?${queryParams}`)
  }

  return (
    <div className={styles.wrapper}>
      <form
        method="GET"
        action={`${nextPath}?${searchParams}`}
        onSubmit={handleSubmit}
      >
        <ul className={styles.list}>
          {alternatives.map((alternative) => (
            <li key={alternative.value}>
              <label>
                <input
                  type="radio"
                  name="breakfast"
                  value={alternative.value}
                />
                <SelectionCard
                  title={alternative.name}
                  subtext={alternative.payment}
                  price={alternative.pricePerNight}
                  currency={alternative.currency}
                />
              </label>
            </li>
          ))}
        </ul>

        <button type="submit" hidden>
          Submit
        </button>
      </form>
    </div>
  )
}