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

import { Loader } from './loader'

const meta = {
  title: 'Loader',
  component: Loader,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    label: {
      control: 'text',
    },
  },
} satisfies Meta<typeof Loader>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: 'Loading...' },
  render: (args) => (
    <div className="relative w-[350px] h-[150px] border">
      <span>Background, loader is applied on, which gets dimmed</span>
      <br />
      <span>needs position relative for correct loader placement</span>
      <Loader {...args} />
    </div>
  ),
  // play: async () => {
  //   // Check that the loader label is visible
  //   expect(screen.getByText('Loading...')).toBeVisible()
  //   const loaderLabel = screen.getByText('Loading...')
  //   // Find the SVG spinner within the loader
  //   const svg = loaderLabel.closest('div')?.querySelector('svg')
  //   expect(svg).toBeTruthy()
  //   expect(svg).toBeVisible()
  //   // Check that the SVG size is greater than 0
  //   const rect = svg?.getBoundingClientRect()
  //   expect(rect?.width).toBeGreaterThan(0)
  //   expect(rect?.height).toBeGreaterThan(0)
  // },
}
