import { CardReport } from '~/components/ui/card-report'

import { REPORT, HISTORY } from './data'
export const DashboardPage = () => {
  return (
    <div className="relative">
      <div>
        <h1>Dashboard</h1>
        <div>tanggal</div>
      </div>

      <div className="flex flex-row gap-4">
        {REPORT.map((report) => (
          <CardReport
            key={report.title}
            title={report.title}
            amound={report.amound}
          ></CardReport>
        ))}
      </div>
      <div className="mt-5 flex flex-col gap-4">
        {HISTORY.map((report) => (
          <CardReport
            key={report.title}
            title={report.title}
            counter={report.counter}
          ></CardReport>
        ))}
      </div>
    </div>
  )
}