"use client"

import { useIntl } from "react-intl"

import Chip from "@/components/TempDesignSystem/Chip"

import { mapExperiencesToListData } from "./utils"

import styles from "./experienceList.module.css"

interface ExperienceListProps {
  experiences: string[]
}

export default function ExperienceList({ experiences }: ExperienceListProps) {
  const intl = useIntl()
  const experienceList = mapExperiencesToListData(experiences, intl)

  return (
    <ul className={styles.experienceList}>
      {experienceList.map(({ Icon, name }) => (
        <li key={name}>
          <Chip variant="tag">
            <Icon size={20} color="Icon/Interactive/Default" />
            {name}
          </Chip>
        </li>
      ))}
    </ul>
  )
}
