import type { Meta, StoryObj } from '@storybook/vue3'
import HealthDashboard from './HealthDashboard.vue'

const meta: Meta<typeof HealthDashboard> = {
  title: 'Components/HealthDashboard',
  component: HealthDashboard,
  tags: ['autodocs'],
}
export default meta

type Story = StoryObj<typeof meta>

// Default story - calls real /api/healthz (works in browser if dev proxy + backend are up)
export const Default: Story = {
  args: {},
}

// Documents the loading/error visuals so reviewers see them in Storybook
// without needing a backend down. The component currently doesn't accept overrides
// because it uses useFetch internally - this story is a placeholder for a future
// refactor that exposes data/pending/error as props for testability.
export const DocumentationStub: Story = {
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          'Renders the same as Default. The HealthDashboard fetches /api/healthz internally, so loading/error states only appear when the backend is down or slow. ' +
          'Future improvement: accept healthData/pending/error as props for easy state-based stories. Until then, see frontend/docs/e2e/ for screenshots of both healthy and error states.',
      },
    },
  },
}