legalgo-FE-reactrouter/app/components/ui/card-report.tsx

import type { JSX } from 'react'

import { formatNumberWithPeriods } from '~/utils/formatter'

type CardReportProperty = {
  title: string
  amount: number
  currency?: string
  icon: (
    properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
  ) => JSX.Element
  url?: string
  counter?: number[]
}

export const CardReport = (properties: CardReportProperty) => {
  const { title, amount, icon: Icon, counter, currency } = properties
  return (
    <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
      <div className="flex items-center">
        <Icon
          className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
          height={48}
          width={48}
        />
        <div className="ml-7">
          <h2 className="text-lg font-semibold">{title}</h2>
          <p className="text-2xl font-bold text-[#2E2F7C]">
            {currency
              ? `${currency} ${formatNumberWithPeriods(amount)}`
              : formatNumberWithPeriods(amount)}
          </p>
        </div>
      </div>
      {counter?.length && (
        <div className="flex items-center pt-2">
          Pribadi: {counter[0]} | Perusahaan: {counter[1]}
        </div>
      )}
    </div>
  )
}