import { Fragment } from "react"

import Title from "@/components/TempDesignSystem/Title"

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

import { OverviewTableTitleProps } from "@/types/components/loyalty/blocks"

export default function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
  return (
    <Title>
      {texts.map(({ text, highlight }, idx) => (
        <Fragment key={idx}>
          <span className={highlight ? styles.highlight : ""}>{text}</span>
          {idx < texts.length - 1 && " "}
        </Fragment>
      ))}
    </Title>
  )
}