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 px-6 py-16">
      {/* Heading */}
      {heading && (
        <p className="text-center text-xs tracking-widest uppercase text-white/30 mb-6">
          {heading}
        </p>
      )}

      {/* Key skills pills */}
      {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-white/70 border border-white/25 rounded-full px-4 py-1.5"
            >
              {skill}
            </span>
          ))}
        </div>
      )}

      {/* Categories grid */}
      {Array.isArray(categories) && categories.length > 0 && (
        <div
          className="border border-white/8 rounded-xl overflow-hidden"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
          }}
        >
          {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-white/8',
                  !isLastRow && 'border-b border-white/8',
                )}
              >
                <i className={`ti ${cat.icon} text-white/40`} style={{ fontSize: 20 }} aria-hidden="true" />
                <p className="text-sm font-medium text-white/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-white/35 border border-white/10 rounded-full px-2.5 py-0.5"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            )
          })}
        </div>
      )}
    </section>
  )
}