import { FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact } from 'react-icons/fa';
import { SiNestjs, SiNuxt, SiPrisma, SiTypescript, SiPostgresql } from 'react-icons/si';
import { styled } from 'styled-components';

// Styled
const StyledTechScroller = styled.ul`
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-size: 2.5em;

  width: 100%;

  svg {
    vertical-align: middle;
  }
`;

// Component
const techs = [FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact, SiNestjs, SiNuxt, SiPrisma, SiTypescript, SiPostgresql];

function TechScroller() {
  return (
    <StyledTechScroller>
      {techs.map((TechIcon, i) => (
        <TechIcon key={i} />
      ))}
    </StyledTechScroller>
  );
}

export default TechScroller;
