<script lang="ts">
  import SkillsMarquee from './SkillsMarquee.svelte'
  import type { Component } from 'svelte'

  // Dev icons
  import IconHtml5 from '~icons/simple-icons/html5'
  import IconCss3 from '~icons/simple-icons/css3'
  import IconJavascript from '~icons/simple-icons/javascript'
  import IconTypescript from '~icons/simple-icons/typescript'
  import IconSvelte from '~icons/simple-icons/svelte'
  import IconPython from '~icons/simple-icons/python'
  import IconJava from '~icons/fa6-brands/java'
  import IconC from '~icons/simple-icons/c'
  import IconNodejs from '~icons/simple-icons/nodedotjs'
  import IconPostgresql from '~icons/simple-icons/postgresql'
  import IconMongodb from '~icons/simple-icons/mongodb'
  import IconGit from '~icons/simple-icons/git'
  import IconVscode from '~icons/simple-icons/visualstudiocode'

  // Ops icons
  import IconLinux from '~icons/simple-icons/linux'
  import IconNixos from '~icons/simple-icons/nixos'
  import IconBash from '~icons/simple-icons/gnubash'
  import IconDocker from '~icons/simple-icons/docker'
  import IconLxc from '~icons/simple-icons/linuxcontainers'
  import IconProxmox from '~icons/simple-icons/proxmox'
  import IconAnsible from '~icons/simple-icons/ansible'
  import IconNginx from '~icons/simple-icons/nginx'
  import IconCaddy from '~icons/simple-icons/caddy'
  import IconWireguard from '~icons/simple-icons/wireguard'
  import IconCloudflare from '~icons/simple-icons/cloudflare'
  import IconOpnsense from '~icons/simple-icons/opnsense'
  import IconGitea from '~icons/simple-icons/gitea'

  interface Skill {
    name: string
    icon: Component
  }

  const devSkills: Skill[] = [
    { name: 'HTML', icon: IconHtml5 },
    { name: 'CSS', icon: IconCss3 },
    { name: 'JavaScript', icon: IconJavascript },
    { name: 'TypeScript', icon: IconTypescript },
    { name: 'Svelte', icon: IconSvelte },
    { name: 'Python', icon: IconPython },
    { name: 'Java', icon: IconJava },
    { name: 'C', icon: IconC },
    { name: 'Node.js', icon: IconNodejs },
    { name: 'PostgreSQL', icon: IconPostgresql },
    { name: 'MongoDB', icon: IconMongodb },
    { name: 'Git', icon: IconGit },
    { name: 'VS Code', icon: IconVscode },
  ]

  const opsSkills: Skill[] = [
    { name: 'Linux', icon: IconLinux },
    { name: 'NixOS', icon: IconNixos },
    { name: 'Bash', icon: IconBash },
    { name: 'Docker', icon: IconDocker },
    { name: 'LXC', icon: IconLxc },
    { name: 'Proxmox', icon: IconProxmox },
    { name: 'Ansible', icon: IconAnsible },
    { name: 'Nginx', icon: IconNginx },
    { name: 'Caddy', icon: IconCaddy },
    { name: 'WireGuard', icon: IconWireguard },
    { name: 'Cloudflare', icon: IconCloudflare },
    { name: 'OPNsense', icon: IconOpnsense },
    { name: 'Gitea', icon: IconGitea },
  ]
</script>

<div class="space-y-6">
  <SkillsMarquee title="Dev" skills={devSkills} duration="50s" maxPerRow={7} pauseOnHover />
  <SkillsMarquee title="Ops" skills={opsSkills} duration="50s" maxPerRow={7} reverse pauseOnHover />
</div>
