import { GraphIcon } from '~/components/icons/graph'
import { formatNumberWithPeriods } from '~/utils/formatter'

interface CardReportProperty {
  title: string
  amount: number
  url?: string
  type?: 'history' | 'report'
  counter?: number[]
}

export const CardReport = (properties: CardReportProperty) => {
  const { title, amount } = properties
  return (
    <>
      <div className="flex items-center rounded bg-white px-4 py-6 shadow-sm">
        <GraphIcon
          className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
          height={48}
          width={48}
        />
        <div className="ml-10">
          <h2 className="text-lg font-semibold">{title}</h2>
          <p className="text-2xl font-bold text-[#2E2F7C]">
            Rp. {formatNumberWithPeriods(amount)}
          </p>
        </div>
      </div>
    </>
  )
}