web/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { FacilityEnum } from "@scandic-hotels/common/constants/facilities"
import { fn } from "storybook/test"
import { Button } from "../Button"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { HotelInfoCard } from "./index"

const meta: Meta<typeof HotelInfoCard> = {
  title: "Product Components/HotelInfoCard",
  component: HotelInfoCard,
  argTypes: {},
}

export default meta

type Story = StoryObj<typeof HotelInfoCard>

export const Default: Story = {
  argTypes: {
    alerts: {
      control: "select",
      options: ["none", "info", "warning", "alarm", "success"],
      mapping: {
        none: [],
        info: [
          {
            id: "1",
            heading: "Hot dog alert",
            text: `They are handing out free hot dogs available in the square outside the hotel.`,
            type: AlertTypeEnum.Info,
          },
        ],
        warning: [
          {
            id: "1",
            heading: "Construction work",
            text: `There is construction work going on outside the hotel. Expect some noise during daytime.`,
            type: AlertTypeEnum.Warning,
          },
        ],
        success: [
          {
            id: "1",
            heading: "Free breakfast",
            text: `We are now serving free breakfast in the lobby between 7-10am.`,
            type: AlertTypeEnum.Success,
          },
        ],
        alarm: [
          {
            id: "1",
            heading: "Fire alarm",
            text: `The fire alarm is activated. Please evacuate the building immediately using the nearest exit.`,
            type: AlertTypeEnum.Alarm,
          },
        ],
      },
    },

    slot: {
      control: "select",
      description: "A slot where you can inject components",
      options: ["none", "button"],
      table: {
        defaultValue: { summary: "button" },
      },
      mapping: {
        none: null,
        button: (
          <Button variant="Text" onPress={() => fn()}>
            Read more <MaterialIcon icon="chevron_right" />
          </Button>
        ),
      },
    },
  },
  args: {
    hotel: {
      id: "1",
      name: "Grand Hotel Budapest",
      url: "https://www.scandichotels.com/en/hello",
      ratings: {
        tripAdvisor: { rating: 4.5 },
      },
    },
    address: {
      city: "Budapest",
      kilometersToCentre: 0.5,
      streetAddress: "1 Main St",
    },
    description:
      "Escape to the crown jewel of the Republic of Zubrowka, where timeless luxury awaits atop our breathtaking mountain sanctuary. The Grand Budapest Hotel stands as Europe's most distinguished retreat, a rose-colored palace that has welcomed discerning guests since the golden age of travel.",
    facilities: [
      { id: FacilityEnum.AirConAirCooling, name: "Air Conditioning" },
      { id: FacilityEnum.FoodDrinks247, name: "Food & Drinks 24/7" },
      { id: FacilityEnum.KayaksForLoan, name: "Kayaks for Loan" },
    ],
    galleryImages: [
      {
        src: "./img/GrandHotelBudapest.png",
        alt: "Grand Hotel Budapest",
        caption: "Grand Hotel Budapest",
      },
      {
        src: "./img/img1.png",
        alt: "Image 1",
        caption: "Image 1",
      },
      {
        src: "./img/img2.png",
        alt: "Image 2",
        caption: "Image 2",
      },
    ],
    alerts: [],
  },
}

export const WithSlot: Story = {
  argTypes: {},
  args: {
    ...Default.args,
    slot: Default.argTypes?.slot?.mapping?.button,
  },
}

export const WithAlert: Story = {
  argTypes: {},
  args: {
    ...Default.args,
    alerts: Default.argTypes?.alerts?.mapping?.info,
  },
}