import { useState } from 'react'
import type { Story, StoryMeta } from './csf.types'
import { ServerErrorState } from './ServerErrorState'

const meta: StoryMeta = {
  title: 'ServerErrorState',
  component: ServerErrorState,
  tags: ['feedback'],
  argTypes: {
    title: { description: 'Override the "Something went wrong" heading', control: 'text' },
    description: { description: 'Override the default error description', control: 'text' },
    onRetry: { description: 'Callback fired when the retry button is clicked', control: false },
    retrying: {
      description: 'Shows a loading spinner on the retry button',
      control: 'boolean',
    },
    retryLabel: { description: 'Label for the retry button', control: 'text' },
    glyph: {
      description: 'Custom element displayed above the title instead of "500"',
      control: false,
    },
  },
}
export default meta

export const Default: Story = {}

function WithRetryStory() {
  const [retrying, setRetrying] = useState(false)
  const handleRetry = () => {
    setRetrying(true)
    setTimeout(() => setRetrying(false), 1500)
  }
  return <ServerErrorState onRetry={handleRetry} retrying={retrying} />
}
export const WithRetry: Story = { render: WithRetryStory }

function CustomGlyphStory() {
  return (
    <ServerErrorState
      glyph={<span style={{ fontSize: 64, lineHeight: 1 }}>⚠️</span>}
      title="Unexpected error"
      description="Please try again or contact support if the problem persists."
    />
  )
}
export const CustomGlyph: Story = { render: CustomGlyphStory }