Scrum4Me/components/dashboard/products-empty-state.tsx

// Empty-state voor de Dashboard products-tabel: wordt getoond wanneer de
// gebruiker (en alle leden van zijn ProductMember-set) nog géén producten
// hebben. Hergebruikt NewProductButton zodat de CTA dezelfde dialog opent
// als de header-knop.

import { NewProductButton } from '@/components/dashboard/new-product-button'
import { debugProps } from '@/lib/debug'

interface Props {
  isDemo: boolean
}

export function ProductsEmptyState({ isDemo }: Props) {
  return (
    <div
      className="rounded-xl border border-border bg-surface-container-low p-12 text-center space-y-4"
      {...debugProps(
        'products-empty-state',
        'ProductsEmptyState',
        'components/dashboard/products-empty-state.tsx',
      )}
    >
      <div>
        <p className="text-base font-medium">
          Nog geen producten aangemaakt
        </p>
        <p className="text-sm text-muted-foreground mt-1">
          Een product groepeert je backlog, sprints en docs. Maak er eentje aan
          om te beginnen.
        </p>
      </div>
      {!isDemo && <NewProductButton />}
    </div>
  )
}