"use client"
import { CreditCard } from "lucide-react"
import { useTranslations } from "next-intl"

export function TopUpsHeader() {
  const t = useTranslations("credits.header")

  return (
    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div className="space-y-1">
        <h1 className="text-2xl font-bold text-blue-950 flex items-center gap-2">
          <CreditCard className="w-6 h-6" />
          {t("title")}
        </h1>
      </div>
    </div>
  )
}