npx shadcn add "https://beste.dev/r/hotel4?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://beste.dev/r-base/hotel4?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Hotel4, hotel4Demo } from "@/components/beste/block/hotel4";

export default function Page() {
  return <Hotel4 {...hotel4Demo} />;
}

import { Bath, Coffee, Waves } from "lucide-react";
import { Hotel4 } from "@/components/beste/block/hotel4";

export default function Page() {
  return (
    <Hotel4
      eyebrow="Sea Suite"
      heading="A room that opens onto the cove."
      description="An arched door leads to a private terrace, and the bath is carved from island stone."
      images={[
        { src: "https://oud.pics/b/hotel/ostria-sea-suite.webp", alt: "A linen bed facing a tall arched window onto the sea" },
        { src: "https://oud.pics/b/hotel/ostria-stone-bath.webp", alt: "A bathtub carved from pale stone beside an arched window" },
      ]}
      facts={[
        { label: "Size", value: "42 m²" },
        { label: "Sleeps", value: "2 guests" },
      ]}
      amenities={[
        { icon: Waves, label: "Private sea terrace" },
        { icon: Bath, label: "Stone bathtub and rain shower" },
        { icon: Coffee, label: "Breakfast served in the room" },
      ]}
      booking={{
        action: "https://booking.example.com/ostria",
        params: { checkIn: "checkin", checkOut: "checkout", room: "room" },
        roomCode: "sea-suite",
        rate: 480,
        currency: "€",
        minNights: 3,
        submitLabel: "Reserve this suite",
        note: "Nothing is charged until 14 days before you arrive.",
      }}
      labels={{
        perNight: "a night",
        checkIn: "Arrive",
        checkOut: "Leave",
        pick: "Add a date",
        nights: { one: "night", other: "nights" },
        total: "Total",
        minStay: "Minimum stay",
        amenities: "In the room",
        showPhoto: "Show photo",
      }}
    />
  );
}

type Image = {
  src: string;
  alt: string;
};

type Fact = {
  label: string;
  value: string;
};

type Amenity = {
  icon: LucideIcon;
  label: string;
};

type Booking = {
  action: string;
  params?: { checkIn?: string; checkOut?: string; room?: string };
  roomCode?: string;
  rate: number;
  currency: string;
  minNights?: number;
  submitLabel: string;
  note?: string;
};

type Labels = {
  perNight?: string;
  checkIn?: string;
  checkOut?: string;
  pick?: string;
  nights?: { one: string; other: string };
  total?: string;
  minStay?: string;
  amenities?: string;
  showPhoto?: string;
};