'use client'

import { SectionHeader } from './section-header'

const SKILL_GROUPS = [
  {
    category: 'Languages',
    skills: ['PHP', 'JavaScript', 'TypeScript', 'Dart'],
  },
  {
    category: 'Frontend',
    skills: ['React', 'Next.js', 'Tailwind CSS', 'Flutter'],
  },
  {
    category: 'Backend',
    skills: ['Laravel', 'Node.js', 'Express'],
  },
  {
    category: 'Database',
    skills: ['MySQL', 'PostgreSQL', 'MongoDB'],
  },
  {
    category: 'Tools & DevOps',
    skills: ['Git', 'Docker', 'GitHub Actions', 'Vercel', 'DigitalOcean', 'Firebase', 'AWS (basic)', 'cPanel'],
  },
  {
    category: 'Workflow',
    skills: ['Agile', 'Jira', 'Trello', 'Postman', 'VS Code'],
  },
]

export function Skills() {
  return (
    <section id="skills" className="py-24 px-6 max-w-5xl mx-auto">
      <SectionHeader label="Skills" />

      <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {SKILL_GROUPS.map((group) => (
          <div
            key={group.category}
            className="bg-card rounded-xl border border-border p-6 hover:border-primary/40 transition-colors"
          >
            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-4">
              {group.category}
            </h3>
            <div className="flex flex-wrap gap-2">
              {group.skills.map((skill) => (
                <span
                  key={skill}
                  className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-secondary text-secondary-foreground border border-border"
                >
                  {skill}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
