.profile/components/Interests/index.tsx

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

import type { InterestParagraphProps } from "./InterestParagraph"
import { InterestParagraph } from "./InterestParagraph"
import { InterestsList } from "./InterestsList"

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

  let paragraphs = i18n.translate<InterestParagraphProps[]>(
    "home.interests.paragraphs",
  )
  if (!Array.isArray(paragraphs)) {
    paragraphs = []
  }

  return (
    <div className="max-w-full">
      {paragraphs.map((paragraph, index) => {
        return <InterestParagraph key={index} {...paragraph} />
      })}
      <InterestsList />
    </div>
  )
}