import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import { ErrorState } from './ErrorState'

type ComponentProps = React.ComponentProps<typeof ErrorState>

const meta: Meta<ComponentProps> = {
  title: 'States/ErrorState',
  component: ErrorState,
  parameters: {
    layout: 'fullscreen',
    chromatic: { disableSnapshot: true },
  },
}

export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="h-screen w-full bg-white">
      <ErrorState {...args} />
    </div>
  )
}

export const ConnectionError: StoryFn<ComponentProps> = Template.bind({})
ConnectionError.args = {
  message:
    'Unable to connect to messaging service. Please check your connection and try again.',
  onBack: () => console.log('Go Back clicked'),
}

export const NoBackButton: StoryFn<ComponentProps> = Template.bind({})
NoBackButton.args = {
  message: 'Failed to load messages.',
  onBack: undefined,
}

export const CustomError: StoryFn<ComponentProps> = Template.bind({})
CustomError.args = {
  message: 'Your session has expired. Please refresh the page to continue.',
  onBack: () => console.log('Go Back clicked'),
}