import { useLocale } from '@meshkee/dashboard-ui'
import type { ReactNode } from 'react'
import pageStyles from './PageContent.module.css'

interface PageTitleProps {
  children: ReactNode
  /** English accent shown after a bullet in FA locale (e.g. USERS). */
  en?: string
}

export function PageTitle({ children, en }: PageTitleProps) {
  const { locale } = useLocale()
  return (
    <h2 className={pageStyles.pageTitle}>
      {children}
      {en && locale === 'fa' ? <span className={pageStyles.pageTitleEn}>{en}</span> : null}
    </h2>
  )
}