import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import {
    Building,
    School,
    Skull,
    TestTubeDiagonalIcon,
    UsersRound,
    Waves,
} from "lucide-react";
import StatsCard from "@/components/Dashboard/DashCard";
import CerobongCard from "@/components/Dashboard/CerobongCard";
import { ChartCard } from "@/components/Dashboard/ChartCard";

export default function Dashboard() {
    return (
        <AuthenticatedLayout header="Dashboard">
            <Head title="Dashboard" />

            <div className="flex flex-1 flex-col gap-4 h-full">
                <DatePickerWithRange />
                <div className="grid gap-4 md:grid-cols-5 items-center w-full">
                    <StatsCard
                        title="Total Laporan Perusahaan"
                        icon={<School size={24} />}
                        value={1305}
                        fromColor="from-[#E6F9FF]"
                        toColor=""
                    />
                    <StatsCard
                        title="Jumlah Perusahaan"
                        icon={<Building size={24} />}
                        value={1305}
                        fromColor="from-[#F7E9FF]"
                        toColor=""
                    />
                    <StatsCard
                        title="Jumlah Verifikator"
                        icon={<UsersRound size={24} />}
                        value={1305}
                        fromColor="from-[#F7E9FF]"
                        toColor=""
                    />
                    <StatsCard
                        title="Air Limbah"
                        icon={<Waves size={24} />}
                        value={1305}
                        fromColor="from-[#F7E9FF]"
                        toColor="#fffff"
                    />
                    <StatsCard
                        title="Limbah B3"
                        icon={<Skull size={24} />}
                        value={1305}
                        fromColor="from-[#F7E9FF]"
                        toColor="#fffff"
                    />
                </div>

                <div className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row mt-8">
                    <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                        <div className="font-semibold leading-none tracking-tight">
                            Total Cerobong per hari ini
                        </div>
                        <div className="text-sm text-muted-foreground">
                            Senin, 03 Feb 2025
                        </div>
                    </div>
                    <div className="flex">
                        <button
                            data-active="true"
                            className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
                        >
                            <span className="text-xs text-muted-foreground">
                                Seluruh Perusahaan
                            </span>
                            <span className="text-lg font-bold leading-none sm:text-3xl">
                                2336
                            </span>
                        </button>
                    </div>
                </div>
                <div className="w-full">
                    <ChartCard />
                </div>

                {/* <div className="flex flex-1 flex-col gap-4 h-full mt-4">
                    <div>
                        <h2>Total Cerobong per hari ini</h2>
                        <span>Senin, 03 Feb 2025</span>
                    </div>
                    <div className="grid gap-4 md:grid-cols-4 items-center w-full">
                        <CerobongCard
                            title="Seluruh Perusahaan"
                            value={1305}
                            fromColor="from-[#F7E9FF]"
                            toColor="#fffff"
                        />
                        <CardChart />
                    </div>
                </div> */}

                {/* <div className="flex-row mt-5">
                    <div className="w-1/3 gap-4 md:grid-cols-3 items-center">
                        <div className="flex flex-row gap-4 h-full">
                            <div className="flex flex-col">
                                <h2>Total Cerobong per hari ini</h2>
                                <span>Senin, 03 Feb 2025</span>
                            </div>
                        </div>
                    </div>
                    <div className="w-2/3 gap-4 md:grid-cols-3 items-center mt-3 ">
                        <CerobongCard
                            title="Jumlah Perusahaan"
                            value={1305}
                            fromColor="from-[#F7E9FF]"
                            toColor=""
                        />
                    </div>
                </div> */}
            </div>
        </AuthenticatedLayout>
    );
}
