Scrum4Me/app/(app)/insights/components/sprint-info-strip.tsx

'use client'

interface SprintInfo {
  sprintId: string
  productName: string
  sprintGoal: string
  taskCount: number
  daysLeft: number
}

interface Props {
  sprints: SprintInfo[]
}

function daysLeftColor(daysLeft: number): string {
  if (daysLeft >= 3) return 'text-[color:var(--status-done)]'
  if (daysLeft >= 1) return 'text-[color:var(--priority-medium)]'
  return 'text-[color:var(--priority-critical)]'
}

function truncate(text: string, max: number): string {
  return text.length > max ? text.slice(0, max) + '…' : text
}

export function SprintInfoStrip({ sprints }: Props) {
  if (sprints.length === 0) return null

  return (
    <div className="flex flex-wrap gap-2">
      {sprints.map(s => (
        <div
          key={s.sprintId}
          className="flex items-center gap-3 rounded-lg border border-border bg-surface-container px-3 py-2 text-sm"
        >
          <span className="font-medium text-foreground">{s.productName}</span>
          <span className="text-muted-foreground">{truncate(s.sprintGoal, 60)}</span>
          <span className={`font-mono tabular-nums ${daysLeftColor(s.daysLeft)}`}>
            {s.daysLeft > 0 ? `${s.daysLeft}d over` : `${Math.abs(s.daysLeft)}d over tijd`}
          </span>
          <span className="text-muted-foreground">{s.taskCount} tasks</span>
        </div>
      ))}
    </div>
  )
}