import { AlertCircle, Boxes, FolderOpen } from 'lucide-react'
import type { Story, StoryMeta } from './csf.types'
import { EmptyState } from './EmptyState'

const meta: StoryMeta = {
  title: 'EmptyState',
  component: EmptyState,
  tags: ['feedback'],
  argTypes: {
    icon: { description: 'Lucide icon component displayed above the title', control: false },
    title: { description: 'Primary heading text', control: 'text' },
    description: { description: 'Supporting text below the title', control: 'text' },
    action: { description: 'Label for the primary action button', control: 'text' },
    onAction: { description: 'Callback fired when the action button is clicked', control: false },
    compact: {
      description: 'Reduces padding and icon size for inline contexts',
      control: 'boolean',
    },
    docsHref: { description: 'Optional link shown as a Docs button', control: 'text' },
  },
}
export default meta

function DefaultStory() {
  return (
    <EmptyState
      icon={Boxes}
      title="No items yet"
      description="Create your first item to get started."
    />
  )
}
export const Default: Story = { render: DefaultStory }

function WithActionStory() {
  return (
    <EmptyState
      icon={FolderOpen}
      title="No projects"
      description="You don't have any projects yet."
      action="New project"
      onAction={() => {}}
    />
  )
}
export const WithAction: Story = { render: WithActionStory }

function CompactStory() {
  return (
    <EmptyState
      icon={AlertCircle}
      title="Nothing here"
      description="This section is currently empty."
      compact
    />
  )
}
export const Compact: Story = { render: CompactStory }