src/components/landing/skills.tsx

import { extractSkills } from "@/ai/flows/skills-extraction";
import { projectDescriptions } from "@/lib/data";
import { Badge } from "@/components/ui/badge";

export async function Skills() {
  let skills: string[] = [];
  try {
    const output = await extractSkills({ projectDescriptions });
    skills = output.skills;
  } catch (error) {
    console.error("Error extracting skills:", error);
    // Fallback skills in case of AI failure
    skills = [
      "Machine Learning",
      "Data Analysis",
      "Python",
      "SQL",
      "Pandas",
      "NumPy",
      "Scikit-learn",
      "Time Series Analysis",
      "NLP",
      "Data Visualization",
    ];
  }

  return (
    <section id="skills" className="w-full py-12 md:py-24 lg:py-32 bg-background">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <h2 className="text-3xl font-headline font-bold tracking-tighter sm:text-5xl text-primary">
            Technical Skills
          </h2>
          <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
            Key skills identified from my project work by a generative AI model.
          </p>
        </div>
        <div className="mx-auto mt-10 max-w-4xl">
          <div className="flex flex-wrap justify-center gap-3">
            {skills.map((skill) => (
              <Badge
                key={skill}
                className="text-sm px-4 py-2"
                variant="default"
                style={{
                  backgroundColor: "hsl(var(--primary))",
                  color: "hsl(var(--primary-foreground))",
                }}
              >
                {skill}
              </Badge>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}