import { CardReport } from '~/components/ui/card-report'
import {
  ChartSubscription,
  UiChartBar,
  UiChartPie,
} from '~/components/ui/chart'

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 }, index) => (
          <CardReport
            key={index}
            title={title}
            amount={amount}
            icon={icon}
          />
        ))}
      </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">
          <UiChartPie />
        </div>
      </div>

      <div className="mt-5 grid max-h-[280px] grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
        <div className="sm:col-span-3">
          <div className="h-30 w-full">
            <div className="shadow-sm">
              <UiChartBar />
            </div>
          </div>
        </div>
        <div className="sm:col-span-2 sm:col-start-4">
          <div className="h-30 w-full">
            <div className="shadow-sm">
              <ChartSubscription />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}