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

import { HISTORY, REPORT } from './data'
export const DashboardPage = () => {
  return (
    <div className="relative">
      <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">
          <ChartPie />
        </div>
      </div>

      <div className="my-5 grid 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">
              <img
                src="/images/dummy-chart-1.svg"
                alt=""
              />
            </div>
          </div>
        </div>
        <div className="sm:col-span-2 sm:col-start-4">
          <div className="h-30 w-full">
            <div className="shadow-sm">
              <img
                src="/images/dummy-chart-3.svg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}