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

import type { PortfolioItemProps } from "./PortfolioItem"
import { PortfolioItem } from "./PortfolioItem"

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

  let items = i18n.translate<PortfolioItemProps[]>("home.portfolio.items")
  if (!Array.isArray(items)) {
    items = []
  }

  return (
    <div className="flex w-full flex-wrap justify-center px-3">
      {items.map((item, index) => {
        return <PortfolioItem key={index} {...item} />
      })}
    </div>
  )
}