import { Code2, Layers, Palette, Server } from "lucide-react";
import { skillGroups } from "@/data/skills";
import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";

const icons = { code: Code2, server: Server, palette: Palette, layers: Layers };

export function Skills() {
  return (
    <section id="skills" className="py-24 sm:py-28">
      <Container>
        <SectionHeading
          title="Skills & technologies"
          description="Technologies I use to design, build, and maintain reliable websites."
        />

        <div className="grid gap-6 sm:grid-cols-2">
          {skillGroups.map((group) => {
            const Icon = icons[group.icon];
            return (
              <div key={group.title} className="card p-6">
                <div className="mb-6 flex items-center gap-3">
                  <Icon className="h-5 w-5 text-indigo dark:text-indigo-light" />
                  <h3 className="text-base font-semibold">{group.title}</h3>
                </div>

                <div className="space-y-5">
                  {group.skills.map((skill) => (
                    <div key={skill.name}>
                      <div className="mb-2 flex items-center justify-between text-sm">
                        <span className="text-slate-600 dark:text-slate-300">{skill.name}</span>
                        <span className="font-mono text-xs text-slate-400">{skill.level}%</span>
                      </div>
                      <div className="h-1.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                        <div
                          className="h-full rounded-full bg-indigo dark:bg-indigo-light"
                          style={{ width: `${skill.level}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}