import CardInfo from '@/components/costum/card_info';
import PageHeader from '@/components/costum/page_header';
import { formatNumber } from '@/helper';
import { useDashboardInfo } from '@/useQuery/query';
import { PhoneIncomingIcon, Users } from 'lucide-react';

export default function Dashboard() {

    const info = useDashboardInfo();

    return (
        <div className="container">
            <PageHeader
                title="Dashboard"
                breadcrumb={[
                    {
                        title: 'Home',
                        path: '/app/dashboard',
                    },
                ]}
            />
            <div className="content">
                <h2>Selamat Datang</h2>
                <h5>Berikut ringkasan posisi keuangan perusahaan Anda</h5>
                <div>
                    <div className="row g-3">
                        <div className="col-xl-3 col-6">
                            <CardInfo
                                title="Kas pada Bank"
                                value={`Rp. ${formatNumber(info.data?.saldo_penempatan)}`}
                                trend={`${info.data?.penempatan} Rekening`}
                            />
                        </div>
                        <div className="col-xl-3 col-6">
                            <CardInfo
                                title="Kas"
                                value={`Rp. ${formatNumber(info.data?.saldo_kas)}`}
                                trend={`${info.data?.kas} Rekening`}
                            />
                        </div>
                        <div className="col-xl-3 col-6">
                            <CardInfo
                                title="Tabungan"
                                value={`Rp. ${formatNumber(info.data?.saldo_tabungan)}`}
                                trend={`${info.data?.tabungan} Rekening`}
                                />
                        </div>
                        <div className="col-xl-3 col-6">
                            <CardInfo
                                title="Deposito"
                                value={`Rp. ${formatNumber(info.data?.saldo_deposito)}`}
                                trend={`${info.data?.deposito} Rekening`}
                                />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
