import Link from 'next/link'
import { debugProps } from '@/lib/debug'

interface Product {
  id: string
  name: string
  description: string | null
}

interface ProductPickerProps {
  products: Product[]
}

export function ProductPicker({ products }: ProductPickerProps) {
  return (
    <div className="p-6 max-w-2xl mx-auto w-full" {...debugProps('product-picker', 'ProductPicker', 'components/solo/product-picker.tsx')}>
      <h1 className="text-xl font-medium text-foreground mb-2">Solo bord</h1>
      <p className="text-sm text-muted-foreground mb-6">
        Kies een product om je persoonlijke Kanban-bord te openen.
      </p>

      {products.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-sm text-muted-foreground mb-3">Je hebt nog geen producten.</p>
          <Link href="/products/new" className="text-sm text-primary hover:underline">
            + Nieuw product aanmaken
          </Link>
        </div>
      ) : (
        <div className="grid gap-2" data-debug-id="product-picker__items">
          {products.map(product => (
            <Link
              key={product.id}
              href={`/products/${product.id}/solo`}
              className="flex flex-col gap-0.5 px-4 py-3 rounded-lg border border-border bg-surface-container hover:bg-surface-container-high transition-colors"
            >
              <span className="text-sm font-medium text-foreground">{product.name}</span>
              {product.description && (
                <span className="text-xs text-muted-foreground line-clamp-1">{product.description}</span>
              )}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}