'use client';

/* NeedsAttentionStrip — phase 03 (DASH-02).
 *
 * Horizontal-scroll strip of compact attention cards. Each card shows a
 * count + label and is a next/link to the destination view. The strip
 * uses native horizontal overflow with snap-x for momentum scroll on
 * iOS/Android. Renders nothing when items=[]. */

import Link from 'next/link';
import { AlertTriangle, ChevronRight } from 'lucide-react';

export interface NeedsAttentionItem {
  id: string;
  label: string;
  count: number;
  href: string;
}

interface NeedsAttentionStripProps {
  items: NeedsAttentionItem[];
}

export function NeedsAttentionStrip({ items }: NeedsAttentionStripProps) {
  if (items.length === 0) return null;
  return (
    <div>
      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
        Needs attention
      </p>
      <div className="-mx-4 px-4 flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1">
        {items.map(item => (
          <Link
            key={item.id}
            href={item.href}
            className="snap-start shrink-0 w-44 rounded-2xl border bg-card p-3 hover:bg-accent transition-colors"
          >
            <div className="flex items-start justify-between">
              <AlertTriangle className={`w-4 h-4 ${item.count > 0 ? 'text-destructive' : 'text-muted-foreground'}`} />
              <ChevronRight className="w-4 h-4 text-muted-foreground" />
            </div>
            <p className={`mt-2 text-2xl font-bold tabular-nums ${item.count > 0 ? 'text-destructive' : ''}`}>
              {item.count}
            </p>
            <p className="text-xs text-muted-foreground mt-0.5">{item.label}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}