import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect } from 'storybook/test'

import { VisibilityBadge } from './visibility-badge'

const meta = {
  component: VisibilityBadge,
  tags: ['ai-generated'],
} satisfies Meta<typeof VisibilityBadge>

export default meta
type Story = StoryObj<typeof meta>

export const Public: Story = {
  args: { visibility: 'public' },
  play: async ({ canvas }) => {
    await expect(canvas.getByText('Public')).toBeVisible()
  },
}

export const Internal: Story = {
  args: { visibility: 'internal' },
}

export const Draft: Story = {
  args: { visibility: 'draft' },
}

// The single project-wide CssCheck. VisibilityBadge applies the `success`
// variant for the `public` visibility (`bg-success/10`, see VARIANT in
// visibility-badge.tsx). A concrete resolved background colour proves the shared
// preview actually loaded the app's Tailwind stylesheet — an unstyled badge
// would report a transparent background.
export const CssCheck: Story = {
  args: { visibility: 'public' },
  play: async ({ canvas }) => {
    const badge = canvas.getByText('Public')
    await expect(getComputedStyle(badge).backgroundColor).toBe(
      'oklab(0.627 -0.166662 0.0992956 / 0.1)',
    )
  },
}
