import React from "react";
import { Skills, Tools } from "../components/skillData.jsx";

function Skill() {
  return (
    <section className="my-28 px-5" id="skill">
      <header className="mb-5 pt-10 text-2xl font-bold">
        <h2>Skills & Tools</h2>
      </header>
      {Skills.length > 0 && (
        <div className="pl-3">
          <h2 className="text-xl"> Skills </h2>
          <div className="my-7 grid grid-cols-3 content-center gap-5 md:grid-cols-6">
            {Skills.map((x) => (
              <div
                className="flex flex-col items-center"
                role="img"
                aria-label={x.skill}
                key={x.id}
              >
                <img
                  src={x.logo}
                  alt=""
                  loading="lazy"
                  className="mb-1 w-16"
                  width="64px"
                  height="64px"
                />
                {x.skill}
              </div>
            ))}
          </div>
        </div>
      )}
      {Tools.length > 0 && (
        <div className="pl-3">
          <h2 className="text-xl"> Tools </h2>
          <div className="my-7 grid grid-cols-3 content-center gap-5 md:grid-cols-6">
            {Tools.map((x) => (
              <div
                className="flex flex-col items-center"
                role="img"
                aria-label={x.skill}
                key={x.id}
              >
                <img
                  src={x.logo}
                  alt=""
                  loading="lazy"
                  className="mb-1 w-16"
                  width="64px"
                  height="64px"
                />
                {x.skill}
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}

export default Skill;
