import { useIntl } from "react-intl"

import { useMyStayStore } from "@/stores/my-stay"

import Row from "./Row"

export default function Guests() {
  const intl = useIntl()

  const { adults, childrenAges } = useMyStayStore((state) => ({
    adults: state.bookedRoom.adults,
    childrenAges: state.bookedRoom.childrenAges,
  }))

  const adultsMsg = intl.formatMessage(
    {
      id: "booking.numberOfAdults",
      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
    },
    {
      adults,
    }
  )

  const childrenMsg = intl.formatMessage(
    {
      id: "booking.numberOfChildren",
      defaultMessage: "{children, plural, one {# child} other {# children}}",
    },
    {
      children: childrenAges.length,
    }
  )

  const adultsOnlyMsg = adultsMsg
  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")

  return (
    <Row
      icon="person"
      text={childrenAges.length > 0 ? adultsAndChildrenMsg : adultsOnlyMsg}
      title={intl.formatMessage({
        id: "booking.guests",
        defaultMessage: "Guests",
      })}
    />
  )
}