import React from 'react'

type SkillCategory = {
  title: string
  icon: string
  tags: { tag: string }[]
}

type SkillsBlockProps = {
  heading?: string
  keySkills?: { skill: string }[]
  categories?: SkillCategory[]
}

export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps) {
  return (
    <section className="w-full max-w-5xl mx-auto py-12">
      {heading && (
        <p className="text-center text-xs tracking-widest uppercase text-foreground/30 mb-6">
          {heading}
        </p>
      )}

      {Array.isArray(keySkills) && keySkills.length > 0 && (
        <div className="flex justify-center gap-3 flex-wrap mb-12">
          {keySkills.map(({ skill }, i) => (
            <span
              key={i}
              className="text-xs text-foreground/70 border border-foreground/25 rounded-full px-4 py-1.5"
            >
              {skill}
            </span>
          ))}
        </div>
      )}

      {Array.isArray(categories) && categories.length > 0 && (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {categories.map((cat, i) => (
            <div
              key={i}
              className="p-6 flex flex-col gap-3 rounded-xl bg-muted/50 border-0 shadow-none"
            >
              <i
                className={`ti ${cat.icon} text-foreground/40`}
                style={{ fontSize: 20 }}
                aria-hidden="true"
              />
              <p className="text-sm font-medium text-foreground/85">{cat.title}</p>
              <div className="flex flex-wrap gap-1.5">
                {Array.isArray(cat.tags) &&
                  cat.tags.map(({ tag }, j) => (
                    <span
                      key={j}
                      className="text-xs text-foreground/50 bg-background/50 border border-foreground/10 rounded-full px-2.5 py-0.5"
                    >
                      {tag}
                    </span>
                  ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </section>
  )
}