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

interface NoActiveSprintProps {
  productId: string
  productName: string
}

export function NoActiveSprint({ productId, productName }: NoActiveSprintProps) {
  return (
    <div className="flex flex-col items-center justify-center h-full gap-4 text-center px-6" {...debugProps('no-active-sprint', 'NoActiveSprint', 'components/solo/no-active-sprint.tsx')}>
      <div className="text-4xl text-muted-foreground">🏃</div>
      <h2 className="text-lg font-medium text-foreground" data-debug-id="no-active-sprint__title">Geen actieve sprint</h2>
      <p className="text-sm text-muted-foreground max-w-sm">
        Er is nog geen actieve sprint voor <span className="font-medium text-foreground">{productName}</span>.
        Start een sprint in het Sprint Board om hier je taken te zien.
      </p>
      <Link
        href={`/products/${productId}/sprint`}
        className="text-sm text-primary hover:underline"
        data-debug-id="no-active-sprint__cta"
      >
        Naar Sprint Board →
      </Link>
    </div>
  )
}