import { getI18n } from '@/i18n/i18n.server'

import { SkillComponent } from './Skill'
import { SkillsSection } from './SkillsSection'

export const Skills = (): JSX.Element => {
  const i18n = getI18n()

  return (
    <>
      <SkillsSection title={i18n.translate('home.skills.languages')}>
        <SkillComponent skill='TypeScript' />
        <SkillComponent skill='Python' />
        <SkillComponent skill='C/C++' />
        <SkillComponent skill='PHP' />
      </SkillsSection>

      <SkillsSection title='Frontend'>
        <SkillComponent skill='HTML' />
        <SkillComponent skill='CSS' />
        <SkillComponent skill='Tailwind CSS' />
        <SkillComponent skill='React.js (+ Next.js)' />
      </SkillsSection>

      <SkillsSection title='Backend'>
        <SkillComponent skill='Laravel' />
        <SkillComponent skill='Node.js' />
        <SkillComponent skill='Fastify' />
        <SkillComponent skill='PostgreSQL' />
      </SkillsSection>

      <SkillsSection title={i18n.translate('home.skills.software-tools')}>
        <SkillComponent skill='GNU/Linux' />
        <SkillComponent skill='Arch Linux' />
        <SkillComponent skill='Visual Studio Code' />
        <SkillComponent skill='Git' />
        <SkillComponent skill='Docker' />
      </SkillsSection>
    </>
  )
}