import type { Meta, StoryObj } from '@storybook/react';
import { createLazyComponent } from './createLazyComponent';

const MockPage = () => <div className="p-8 font-bold">Loaded successfully.</div>;

const LazySuccess = createLazyComponent(
  () => Promise.resolve({ default: MockPage }),
  <div className="flex items-center justify-center min-h-layout-story p-8 text-muted-foreground">Loading...</div>,
  'Demo',
);

const meta: Meta<typeof LazySuccess> = {
  title: 'Components/UI/LazyComponent',
  component: LazySuccess,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  decorators: [
    (Story) => (
      <div className="min-h-layout-story w-full max-w-lg border rounded-lg p-4">
        <Story />
      </div>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof meta>;

/** Lazy component loaded successfully */
export const Default: Story = {};

/** Loading state — never-resolving import (see LazyErrorFallback for error state) */
export const Loading: Story = {
  render: () => {
    const LazyLoading = createLazyComponent(
      () => new Promise(() => {}),
      <div className="flex items-center justify-center min-h-layout-story p-8 text-muted-foreground">Loading...</div>,
    );
    return <LazyLoading />;
  },
};