import { Empty } from '@primitivekit/react';

<Empty />

<Empty description="No data available" />

<Empty 
  image="/empty-state.svg"
  description="No items found"
/>

<Empty 
  description="No products found"
  action={
    <Button onClick={() => navigate('/products/new')}>
      Add Product
    </Button>
  }
/>

<Empty>
  <div>
    <h3>No Results</h3>
    <p>Try adjusting your search or filters</p>
    <Button>Clear Filters</Button>
  </div>
</Empty>

<Empty
  description="No items"
  style={{
    '--empty-padding': '48px',
    '--empty-color': 'rgba(150, 150, 150, 1)',
    '--empty-font-size': '16px',
  }}
/>

function SearchResults({ results, query }) {
  if (results.length === 0) {
    return (
      <Empty 
        description={`No results found for "${query}"`}
        action={
          <Button onClick={() => clearSearch()}>
            Clear Search
          </Button>
        }
      />
    );
  }

  return <ResultsList results={results} />;
}

<Table
  columns={columns}
  dataSource={[]}
  emptyText={
    <Empty 
      description="No users found"
      action={
        <Button onClick={() => navigate('/users/new')}>
          Add User
        </Button>
      }
    />
  }
/>