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

import { ChartBar } from './chart-bar'
import { ChartDonut } from './chart-donut'
import { ChartPie } from './chart-pie'
import { HISTORY, REPORT } from './data'
export const DashboardPage = () => {
  return (
    <div className="relative">
      <section className="mb-5 flex items-center justify-between">
        <h1 className="text-xl font-bold">Dashboard</h1>
        <div className="flex items-center gap-2">
          <span>Tanggal:</span>
          <input
            type="date"
            className="rounded border p-2"
          />
          <input
            type="date"
            className="rounded border p-2"
          />
        </div>
      </section>
      <div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
        {REPORT.map(({ title, amount, icon, currency }, index) => (
          <CardReport
            key={index}
            title={title}
            amount={amount}
            icon={icon}
            currency={currency}
          />
        ))}
      </div>

      <div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
        {HISTORY.map(({ title, amount, icon, counter }, index) => (
          <CardReport
            key={index}
            title={title}
            amount={amount}
            icon={icon}
            counter={counter}
          />
        ))}
        <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
          <ChartPie />
        </div>
      </div>

      <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
        <div className="h-full w-full sm:w-[60%]">
          <ChartBar />
        </div>
        <div className="w-ful h-full sm:w-[40%]">
          <ChartDonut />
        </div>
      </div>
    </div>
  )
}