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

import { REPORT } from './data'
export const DashboardPage = () => {
  return (
    <div className="relative">
      <div className="container mx-auto">
        <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="mb-5 grid grid-cols-3 gap-4">
          {REPORT.map(({ title, amount }, index) => (
            <CardReport
              key={index}
              title={title}
              amount={amount}
            />
          ))}
        </div>

        <div className="grid grid-cols-3 gap-x-4 gap-y-4">
          <div className="grid gap-y-4">
            <div className="rounded-lg bg-white p-5 shadow">
              <div className="flex items-center">
                <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">Total Kunjungan</h2>
                  <p className="text-3xl font-bold text-[#2E2F7C]">2.890</p>
                </div>
              </div>
              <p className="pt-2">Pribadi: 2.190 | Perusahaan: 700</p>
            </div>
            <div className="rounded-lg bg-white p-5 shadow">
              <div className="flex items-center">
                <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">Total User Memesan</h2>
                  <p className="text-3xl font-bold text-[#2E2F7C]">274</p>
                </div>
              </div>
              <p className="pt-2">Pribadi: 211 | Perusahaan: 54</p>
            </div>
          </div>
          <div className="col-span-2">
            <img
              src="/images/dummy-chart-2.svg"
              alt=""
            />
          </div>
        </div>

        <div className="mt-5 flex justify-between gap-5">
          <div className="w-[600px] shadow-sm">
            <img
              src="/images/dummy-chart-1.svg"
              alt=""
            />
          </div>
          <div className="w-[480px] shadow-sm">
            <img
              src="/images/dummy-chart-3.svg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  )
}