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 (
    // Standardized vertical spacing to match other page sections
    <section className="w-full max-w-5xl mx-auto py-12 md:py-28">
      <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
        {heading && (
          <p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
            {heading}
          </p>
        )}
        <div className="flex flex-wrap gap-3">
          {tools.map((tool, i) => (
            <span
              key={i}
              className="text-xs text-foreground/60 bg-background/50 border border-foreground/10 rounded-full px-4 py-2 hover:text-foreground/90 hover:border-foreground/20 transition-all"
            >
              {tool.name}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}
