"use client"

import { SectionWrapper } from "@/components/section-wrapper"
import { IconCloud } from "@/components/ui/icon-cloud"

const skills = [
  "Go",
  "Python",
  "TypeScript",
  "C#",
  "JavaScript",
  "Swift",
  "Shell",
  "Django",
  "React",
  "Docker",
  "Traefik",
  "MT5",
  "OpenAI",
  "TG Bot",
  "MySQL",
  "Git",
  "CI/CD",
  "DevOps",
  "ERP",
  "量化",
]

// 为每个技能生成 SVG 文本元素
function SkillIcon({ text }: { text: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 40 40"
    >
      <circle cx="20" cy="20" r="18" fill="currentColor" opacity="0.1" />
      <text
        x="20"
        y="24"
        textAnchor="middle"
        fontSize="8"
        fill="currentColor"
        fontWeight="500"
      >
        {text.slice(0, 5)}
      </text>
    </svg>
  )
}

export function Skills() {
  const iconElements = skills.map((skill, i) => <SkillIcon key={i} text={skill} />)

  return (
    <SectionWrapper id="skills" className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <h2 className="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
          技能与技术
        </h2>

        <div className="flex flex-col items-center gap-8 lg:flex-row lg:justify-center lg:gap-16">
          {/* 3D 图标云 */}
          <div className="relative flex items-center justify-center">
            <IconCloud icons={iconElements} />
          </div>

          {/* 技能分类 */}
          <div className="space-y-6">
            <div>
              <h3 className="mb-2 font-semibold">编程语言</h3>
              <div className="flex flex-wrap gap-2">
                {["Go", "Python", "TypeScript", "C#", "JavaScript", "Swift"].map(
                  (s) => (
                    <span
                      key={s}
                      className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
                    >
                      {s}
                    </span>
                  )
                )}
              </div>
            </div>
            <div>
              <h3 className="mb-2 font-semibold">框架与服务</h3>
              <div className="flex flex-wrap gap-2">
                {["Django", "React", "MT5", "OpenAI API", "TG Bot"].map(
                  (s) => (
                    <span
                      key={s}
                      className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
                    >
                      {s}
                    </span>
                  )
                )}
              </div>
            </div>
            <div>
              <h3 className="mb-2 font-semibold">运维与工具</h3>
              <div className="flex flex-wrap gap-2">
                {["Docker", "Traefik", "MySQL", "CI/CD", "DevOps"].map((s) => (
                  <span
                    key={s}
                    className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
                  >
                    {s}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </SectionWrapper>
  )
}