import React from 'react'
import { cn } from '@/utilities/ui'

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 px-6 py-16">
      {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="border border-foreground/8 rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
          {categories.map((cat, i) => {
            const isLastRow = i >= categories.length - (categories.length % 3 || 3)
            const isLastCol = (i + 1) % 3 === 0
            return (
              <div
                key={i}
                className={cn(
                  'p-6 flex flex-col gap-3',
                  !isLastCol && 'border-r border-foreground/8',
                  !isLastRow && 'border-b border-foreground/8',
                )}
              >
                <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/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
                      >
                        {tag}
                      </span>
                    ))}
                </div>
              </div>
            )
          })}
        </div>
      )}
    </section>
  )
}