import React from 'react'

const colorMap: Record<string, { border: string; dot: string }> = {
  gray: { border: 'border-t-[#888780]', dot: 'bg-[#888780]' },
  blue: { border: 'border-t-[#378ADD]', dot: 'bg-[#378ADD]' },
  green: { border: 'border-t-[#1D9E75]', dot: 'bg-[#1D9E75]' },
  amber: { border: 'border-t-[#BA7517]', dot: 'bg-[#BA7517]' },
  red: { border: 'border-t-[#E24B4A]', dot: 'bg-[#E24B4A]' },
  purple: { border: 'border-t-[#7F77DD]', dot: 'bg-[#7F77DD]' },
  teal: { border: 'border-t-[#1D9E75]', dot: 'bg-[#1D9E75]' },
}

type Card = { title: string; subtitle?: string }
type Column = { title: string; color?: string; cards?: Card[] }
type Props = { columns?: Column[] }

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

  return (
    // Standardized vertical padding to match other page sections
    <section className="w-full max-w-5xl mx-auto py-12 md:py-28">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {columns.map((col, i) => {
          const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
          return (
            <div
              key={i}
              className={`bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
            >
              <div className="flex items-center gap-2 mb-2">
                <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
                <span className="text-xs font-bold tracking-[0.2em] uppercase text-foreground/60">
                  {col.title}
                </span>
              </div>
              {Array.isArray(col.cards) &&
                col.cards.map((card, j) => (
                  <div
                    key={j}
                    className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1"
                  >
                    <p className="text-sm font-medium text-foreground/80">{card.title}</p>
                    {card.subtitle && (
                      <p className="text-[11px] text-foreground/40">{card.subtitle}</p>
                    )}
                  </div>
                ))}
            </div>
          )
        })}
      </div>
    </section>
  )
}
