import Chip from "@/components/chip";
import { Skill } from "@/lib/types";

interface SkillsProps {
  skills: Skill[];
}

const Skills = ({ skills }: SkillsProps) => {
  return (
    <div
      id="skills"
      className="flex flex-col items-center justify-center gap-4 p-4 rounded w-full"
    >
      <h3 className="mt-4 mb-2 text-5xl font-bold tracking-tight text-white">
        Skills 🛠️
      </h3>
      <div className="flex flex-wrap justify-center w-full max-w-lg gap-4">
        {skills.map((skill, index) => (
          <div
            key={index}
            className="odd:motion-preset-slide-left even:motion-preset-slide-right odd:motion-delay-100"
          >
            <Chip text={skill.name} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Skills;