import styles from "@/styles/home/skills.module.css"
import Image from "next/image"

export default function Skills() {
  async function renderSkillIcons() {
    const iconNames = ["html", "css", "js", "ts", "mongodb", "express", "react", "nodejs", "nextjs", "tailwind", "firebase", "supabase", "chartjs"]
    const iconsData: { src: string, alt: string }[] = []

    for (const name of iconNames) {
      const module = await import(`@/assets/skillIcons/${name}.png`)
      iconsData.push({ src: module.default.src as string, alt: name })
    }

    return iconsData.map(({ src, alt }, i) => (
      <div key={i}>
        <Image className={styles.skill} src={src} alt={alt} width={60} height={60} />
      </div>
    ))
  }

  return (
    <div className={styles.skills}>
      <h1>Skills</h1>
      <div className={styles.skillsGrid}>
        {renderSkillIcons()}
      </div>
    </div>
  )
}

I have a lot of images to use, so I'm importing them like this but they're kinda blurry
upon refreshing the page the images became a bit clear but it's still blur
how do I fix this?