import React from 'react'

type ToolStackBlockProps = {
  heading?: string
  tools?: { name: string }[]
}

export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
  if (!Array.isArray(tools) || tools.length === 0) return null

  return (
    <section className="w-full max-w-5xl mx-auto px-6 py-16">
      <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
        {heading && (
          <p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">{heading}</p>
        )}
        <div className="flex flex-wrap gap-2">
          {tools.map((tool, i) => (
            <span
              key={i}
              className="text-xs text-foreground/50 bg-background/50 border border-foreground/8 rounded-full px-3 py-1.5 hover:text-foreground/70 hover:border-foreground/15 transition-colors"
            >
              {tool.name}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}