// src/blocks/KanbanHori/Component.tsx
import React from 'react'

type Card = { title: string; subtitle?: string }
type Row = { label: string; cards?: Card[] }
type Props = { rows?: Row[] }

export function KanbanHoriBlock({ rows }: Props) {
  if (!Array.isArray(rows) || rows.length === 0) return null

  return (
    <section className="w-full max-w-5xl mx-auto px-6 py-16">
      <div className="flex flex-col gap-4">
        {rows.map((row, i) => (
          <div key={i} className="grid grid-cols-[100px_1fr] gap-4 items-start">
            <div className="text-xs font-medium text-foreground/50 text-right pr-4 pt-2.5 border-r border-foreground/10">
              {row.label}
            </div>
            <div className="flex flex-wrap gap-3">
              {Array.isArray(row.cards) &&
                row.cards.map((card, j) => (
                  <div
                    key={j}
                    className="bg-muted/50 border border-foreground/8 rounded-lg px-3 py-2.5 flex flex-col gap-0.5 min-w-[120px]"
                  >
                    <p className="text-sm font-medium text-foreground/85">{card.title}</p>
                    {card.subtitle && <p className="text-xs text-foreground/40">{card.subtitle}</p>}
                  </div>
                ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}