Empty State

import { EmptyState } from '@/components/ui/empty-state'

export default function Example() {
  return (
    <>
      {/* Basic usage (illustrated style - default) */}
      <EmptyState
        title="No projects"
        description="Create your first project"
        action={{ label: "Create", onClick: handleCreate }}
      />

      {/* Simple style (no rings/floating icons) */}
      <EmptyState
        style="simple"
        title="No items"
        description="Add your first item"
      />

      {/* Using a preset variant */}
      <EmptyState variant="search" />
      <EmptyState variant="no-data" />
      <EmptyState variant="no-users" />

      {/* With search term */}
      <EmptyState
        variant="search"
        searchTerm="design system"
        action={{ label: "Clear", onClick: clearSearch }}
      />

      {/* Illustrated with decorations disabled */}
      <EmptyState
        showRings={false}
        showFloatingIcons={false}
        title="Minimal illustrated"
      />

      {/* With primary and secondary actions */}
      <EmptyState
        action={{ label: 'Primary', onClick: () => {} }}
        secondaryAction={{ label: 'Secondary', onClick: () => {} }}
      />

      {/* With inline link */}
      <EmptyState
        description="No data available"
        linkText="Learn more"
        onLinkClick={() => console.log('Link clicked')}
      />
    </>
  )
}