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

import CpTableEmptyState from '@/components/CpTableEmptyState.vue'

const meta = {
  title: 'Molecules/CpTableEmptyState',
  component: CpTableEmptyState,
  argTypes: {
    placeholder: {
      control: 'text',
      description: 'Placeholder text to display',
    },
  },
  decorators: [
    () => ({
      template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story /></div>',
    }),
  ],
} satisfies Meta<typeof CpTableEmptyState>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Empty-state block rendered inside a table when no rows match the
 * current filters. Use the controls to experiment with each prop.
 */
export const Default: Story = {
  args: {
    placeholder: 'No results found',
  },
  render: (args: Args) => ({
    components: { CpTableEmptyState },
    setup() {
      return { args }
    },
    template: '<CpTableEmptyState v-bind="args" />',
  }),
}