import { Meta, StoryObj } from "@storybook/react"
import React, { lazy } from "react"
import { Spinner } from "../Spinner"
import { withSuspense } from "./withSuspense"

type Story = StoryObj

const meta: Meta = {
  title: "Examples/WithSuspense",
}

export default meta

const LazyText = lazy(() =>
  import("../Text").then(module => ({ default: module.Text })),
)

const SuspenseLazyText = withSuspense(LazyText)

export const Default: Story = {
  render: function Render() {
    return (
      <SuspenseLazyText fallback={<Spinner />}>Hello world</SuspenseLazyText>
    )
  },
}

const SuspenseLazyTextWithDefaultFallback = withSuspense(LazyText, <Spinner />)

export const DefaultFallback: Story = {
  render: function Render() {
    return (
      <SuspenseLazyTextWithDefaultFallback>
        Hello world
      </SuspenseLazyTextWithDefaultFallback>
    )
  },
}